Flutter：如何将FAB底部对齐且无内边距（不使用Stack）

Hey，我之前刚好遇到过一模一样的需求，不用Stack完全没问题！给你两个亲测有效的方案：

方案一：利用Scaffold内置属性（推荐） #

默认Scaffold的FAB会自带底部内边距（主要是适配iOS的底部安全区），我们可以通过以下设置彻底消除内边距，让FAB紧贴屏幕底部：

Scaffold(
  extendBody: true, // 允许内容延伸至底部安全区之外
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
  // 自定义FAB位置，抵消底部安全区的内边距
  floatingActionButtonLocation: FloatingActionButtonLocation(
    offsetX: 0,
    offsetY: -MediaQuery.of(context).padding.bottom,
  ),
)

关键细节：

• extendBody: true：让Scaffold的内容可以覆盖底部安全区域，避免FAB被安全区的内边距挤上去
• 自定义FloatingActionButtonLocation：通过offsetY设置为负的底部安全区高度，精准把FAB拉到屏幕最底部

方案二：用Column+MediaQuery移除安全区内边距 #

如果不想依赖Scaffold的FAB专属属性，也可以把FAB放在页面主布局里，用Column实现底部对齐：

MediaQuery.removePadding(
  context: context,
  removeBottom: true, // 移除底部的安全区内边距
  child: Column(
    mainAxisAlignment: MainAxisAlignment.end, // 将子组件推至屏幕底部
    children: [
      FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    ],
  ),
)

这个方法的核心是MediaQuery.removePadding去掉系统默认的底部安全区内边距，再通过Column的MainAxisAlignment.end让FAB完全贴合屏幕底部。

额外提醒 #

如果你的页面搭配了BottomNavigationBar，记得开启Scaffold的extendBody: true，这样FAB可以根据需求贴在导航栏上方或下方（调整offsetY即可）。

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