Flutter开发：如何移除屏幕底部ElevatedButton下方的多余空白

问题原因 #

底部按钮的空白主要来自两点：

1. ElevatedButton默认带有满足无障碍要求的额外点击区域预留，以及默认内边距
2. 使用Column的MainAxisAlignment.spaceBetween布局时，底部剩余可分配空间大于按钮本身高度，也会产生额外留白

可行解决方案 #

• 方案1：调整ElevatedButton样式，消除默认留白
  修改按钮的style属性，关闭额外的点击区域预留，自定义内边距即可：

style: ElevatedButton.styleFrom(
  tapTargetSize: MaterialTapTargetSize.shrinkWrap, // 取消额外点击区域
  padding: EdgeInsets.symmetric(vertical: 12), // 按需调整按钮内边距，不需要可以设为EdgeInsets.zero
),

修改后完整代码：

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'),
            style: ElevatedButton.styleFrom(
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
              padding: EdgeInsets.symmetric(vertical: 12),
            ),
          ),
        ],
      ),
    );
  }
}

• 方案2：将底部按钮放到Scaffold的bottomNavigationBar属性中
  Scaffold的bottomNavigationBar区域默认贴合屏幕底部，更适合固定底部按钮的场景，不需要额外处理布局留白：
  修改后完整代码：

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: Center(
        child: Text('User Inputs'),
      ),
      bottomNavigationBar: ElevatedButton.icon(
        onPressed: () {},
        icon: Icon(Icons.add),
        label: Text('Add Place'),
        style: ElevatedButton.styleFrom(
          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
        ),
      ),
    );
  }
}

如果修改后仍有残留留白，检查项目全局主题配置中是否为ElevatedButton设置了默认margin，将对应配置改为EdgeInsets.zero即可。

内容的提问来源于stack exchange，提问作者Siddharthj