Flutter：如何让Persistent Bottom Sheet完全上推Floating Action Button

最佳方案：使用Scaffold的bottomSheet属性替代showBottomSheet #

默认的showBottomSheet是将Sheet添加到Overlay层，Scaffold只会对FAB做部分偏移，无法完全避免遮挡。而直接使用Scaffold内置的bottomSheet属性时，框架会自动管理FAB的位置，让它完全上推至Sheet上方。

示例代码：

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  bool _showBottomSheet = false;
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(title: const Text("Demo")),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _showBottomSheet = !_showBottomSheet),
        child: Icon(_showBottomSheet ? Icons.close : Icons.add),
      ),
      // 用Scaffold的bottomSheet属性实现持久化底部Sheet
      bottomSheet: _showBottomSheet
          ? Padding(
              padding: EdgeInsets.only(
                bottom: MediaQuery.of(context).viewPadding.bottom,
              ),
              child: MyBottomSheetWidget(),
            )
          : null,
    );
  }
}

备选方案：手动调整FAB位置（若坚持用showBottomSheet） #

如果你必须使用showBottomSheet，可以通过监听Sheet的高度动态调整FAB的margin，确保它完全避开Sheet区域：

double _fabBottomMargin = 0;

void _showPersistentSheet() {
  final controller = scaffoldKey.currentState?.showBottomSheet(
    backgroundColor: Colors.white,
    (context) => Padding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewPadding.bottom,
      ),
      child: MyBottomSheetWidget(),
    ),
  );

  // Sheet关闭时重置FAB位置
  controller?.closed.whenComplete(() {
    setState(() => _fabBottomMargin = 0);
  });

  // 计算Sheet高度并调整FAB margin
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final sheetContext = controller?.context;
    if (sheetContext != null) {
      final renderBox = sheetContext.findRenderObject() as RenderBox?;
      if (renderBox != null) {
        final sheetHeight = renderBox.size.height;
        setState(() {
          _fabBottomMargin = sheetHeight + MediaQuery.of(context).viewPadding.bottom;
        });
      }
    }
  });
}

// 在FAB中应用margin
floatingActionButton: Container(
  margin: EdgeInsets.only(bottom: _fabBottomMargin),
  child: FloatingActionButton(
    onPressed: _showPersistentSheet,
    child: const Icon(Icons.add),
  ),
),

说明 #

第一种方案是官方推荐的实现方式，无需手动计算布局，兼容性和稳定性更好。第二种方案适合已有代码依赖showBottomSheet的场景，但需要额外处理状态和布局计算。

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