如何去掉屏幕底部提升按钮下的space？

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'),
          ),
        ],
      ),
    );
  }
}

我在页面底部的提升按钮下得到一个 space，请提供任何解决方案以将其删除。

Answer 1

为了实现这一点，remove the drop shadow 和 extra margin 围绕 ElevatedButton。

为此设置 elevation to 0，它会删除阴影。

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

在 ElevatedButton 中添加此代码：

tapTargetSize: MaterialTapTargetSize.shrinkWrap,
elevation: 0,

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

Answer 2

请参考以下代码

在ElevatedButton.iconWidget

里面添加这段代码

样式：ButtonStyle( tapTargetSize: MaterialTapTargetSize .shrinkWrap, /* 请添加这个以避免填充 */ ),

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 3

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

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',
      ),
    ),
  ),
);

您的结果屏幕->

如何去掉屏幕底部提升按钮下的space？

How to remove the space under the elevated button at the bottom of the screen?

user-interface

button

spacing

dart

flutter