Flutter：如何移除Scaffold内FAB的底部额外边距

大屏iPhone（如iPhone X及后续机型）底部存在安全区域，FloatingActionButtonLocation.centerDocked默认会为FAB添加适配该区域的内边距，导致按钮下方出现空隙。以下是两种解决方法：

方法一：自定义FloatingActionButton位置 #

创建自定义位置类，绕过安全区域的内边距计算：

class NoPaddingCenterDocked extends FloatingActionButtonLocation {
  const NoPaddingCenterDocked();

  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    return Offset(
      // 保持水平居中
      scaffoldGeometry.scaffoldSize.width / 2 - scaffoldGeometry.floatingActionButtonSize.width / 2,
      // 贴紧屏幕底部，不减去安全区域高度
      scaffoldGeometry.scaffoldSize.height - scaffoldGeometry.floatingActionButtonSize.height,
    );
  }
}

在Scaffold中使用该自定义位置：

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          floatingActionButtonLocation: const NoPaddingCenterDocked(),
          floatingActionButton: Padding(
            padding: EdgeInsets.zero,
            child: Container(height: 56, color: Colors.red),
          ),
        ),
      ),
    );

方法二：使用Stack手动定位FAB #

放弃Scaffold自带的FAB配置，用Stack直接将按钮固定在屏幕底部：

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: Stack(
            children: [
              // 页面主体内容
              const Center(child: Text("页面内容")),
              // 底部FAB
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                child: Center(
                  child: Container(height: 56, width: 56, color: Colors.red),
                ),
              ),
            ],
          ),
        ),
      ),
    );

注意事项 #

直接贴到底部的按钮可能会被iPhone底部手势条（返回主屏幕横条）遮挡，若需避免手势冲突，可将bottom值设为MediaQuery.of(context).padding.bottom，但这会恢复部分内边距，需根据需求权衡。

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