如何删除屏幕底部提升按钮下的空间？屏幕截图已附上

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

为此， remove the drop shadow和extra margin 。

为此，将elevation to 0 ，这将删除投影。

要消除按钮周围的额外边距，请使用材质选项卡目标大小并将其设置为MaterialTabTargetSize.shrinkWrap 。 MaterialTabTargetSize 基本上确保您有更大的空间可以用手指敲击，如果我们通过将其设置为 .shrinkWrap 来缩小它，您就可以摆脱额外的边距。

在 ElevatedButton 中添加以下代码：

tapTargetSize: MaterialTabTargetSize.shrinkWrap,
elevation: 0,

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

Answer 2

请参考以下代码

ElevatedButton.icon(
            style: ButtonStyle(
              tapTargetSize: MaterialTapTargetSize
                  .shrinkWrap, /* Please add this to avoid padding */
            ),
            onPressed: () {},
            icon: Icon(Icons.add),
            label: Text('Add Place'),
          ),

Answer 3

试试下面的代码希望它对你有帮助。 你也可以在这里使用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',
      ),
    ),
  ),
);

您的结果屏幕->