如何去除屏幕底部提升按钮下方的空格？

Question

 import 'package:flutter/material.dart';

class AddPlaceScreen extends StatefulWidget {
  static const routeName = '/add-place';
  @override
  _AddPlaceScreenState createState() => _AddPlaceScreenState();
}

class _AddPlaceScreenState extends State<AddPlaceScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add new Place data'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('User Inputs'),
          ElevatedButton.icon(
            onPressed: () {},
            icon: Icon(Icons.add),
            label: Text('Add Place'),
          ),
        ],
      ),
    );
  }
}

我在页面底部的提升按钮下有一个空格，请提供任何解决方案来删除它。

Answer 1

请参考以下代码

在 ElevatedButton.icon Widget 中添加这段代码

style: ButtonStyle(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap, /* Please add this to avoid padding */
),

class AddPlaceScreen extends StatefulWidget {
  static const routeName = '/add-place';
  @override
  _AddPlaceScreenState createState() => _AddPlaceScreenState();
}

class _AddPlaceScreenState extends State<AddPlaceScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add new Place data'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('User Inputs'),
          ElevatedButton.icon(
            style: ButtonStyle(
              tapTargetSize: MaterialTapTargetSize
                  .shrinkWrap, /* Please add this to avoid padding */
            ),
            onPressed: () {},
            icon: Icon(Icons.add),
            label: Text('Add Place'),
          ),
        ],
      ),
    );
  }
}

Answer 2

尝试下面的代码希望对您有所帮助。你也可以使用

BottomSheet

这里

Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Text('User Inputs'),
      ],
    ),
  ),
  bottomSheet: Container(
    width: double.infinity,
    child: ElevatedButton.icon(
      style: ButtonStyle(
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(0),
             
          ),
        ),
      ),
      onPressed: () {
        // Add your button press function here
        print('Button Pressed');
      },
      icon: Icon(
        Icons.add,
      ),
      label: Text(
        'Add Place',
      ),
    ),
  ),
);

您的结果屏幕->

Answer 3

要实现此目的，请在 ElevatedButton 周围使用

remove the drop shadow

和

extra margin

。

为此设置

elevation to 0

，可消除投影。

要消除按钮周围的额外边距，请使用材质选项卡目标尺寸并将其设置为

MaterialTapTargetSize.shrinkWrap

。 MaterialTapTargetSize 基本上确保您有更大的空间可以用手指点击，如果我们通过将其设置为 .shrinkWrap 来缩小空间，您就可以消除多余的边距。

将此代码添加到 ElevatedButton 中：

tapTargetSize: MaterialTapTargetSize.shrinkWrap,
elevation: 0,

因此，通过在此处进行设置，按钮现在实际上位于屏幕的末端。