如何移除Flutter中PersistentFooterButtons组件的默认边距

问题原因 #

persistentFooterButtons 出现默认边距是因为Scaffold会自动给传入的Widget列表外层包裹两层自带边距的组件：

• 外层默认配置了 EdgeInsets.fromLTRB(8, 0, 8, 8) 的全局边距
• 内层会套一个ButtonBar组件，自带主题配置的内边距和按钮间距

解决方案 #

方案1：高版本Flutter直接配置Scaffold属性（推荐）

Flutter 3.7及以上版本Scaffold新增了persistentFooterPadding参数，直接设为零即可消除外层默认边距，同时局部覆盖ButtonBar主题消除内层边距：

Theme(
  data: Theme.of(context).copyWith(
    // 消除内层ButtonBar默认边距
    buttonBarTheme: const ButtonBarThemeData(
      padding: EdgeInsets.zero,
      buttonPadding: EdgeInsets.zero,
      alignment: MainAxisAlignment.start,
    ),
  ),
  child: Scaffold(
    extendBody: true,
    // 消除外层默认边距
    persistentFooterPadding: EdgeInsets.zero,
    persistentFooterButtons: [
      // 你原来的自定义代码不变
      Container(
        color: const Color.fromRGBO(240, 240, 240, 0.9),
        width: double.infinity,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 2),
          child: Row(
            children: [
              Expanded(
                child: GestureDetector(
                  child: Column(
                    children: [
                      const Image(
                        image: AssetImage('assets/images/home.png'),
                        height: 35,
                      ),
                      Text(
                        "Início",
                        style: TextStyle(
                          fontSize: 10,
                          color: Theme.of(context).primaryColor,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      )
    ],
    // 其他Scaffold配置...
  ),
)

方案2：改用bottomNavigationBar实现

如果你不需要persistentFooterButtons的悬浮特性，只是要固定在底部的全宽栏，直接把自定义组件放到Scaffold的bottomNavigationBar参数即可，该参数默认无额外边距，适配更简单：

Scaffold(
  extendBody: true,
  bottomNavigationBar: Container(
    color: const Color.fromRGBO(240, 240, 240, 0.9),
    width: double.infinity,
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 2),
      child: Row(
        children: [
          Expanded(
            child: GestureDetector(
              child: Column(
                children: [
                  const Image(
                    image: AssetImage('assets/images/home.png'),
                    height: 35,
                  ),
                  Text(
                    "Início",
                    style: TextStyle(
                      fontSize: 10,
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  ),
  // 其他Scaffold配置...
)

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