Flutter：SnackBar显示在ModalBottomSheet下方的问题求助

问题根源 #

你调用SnackBar时用的context是打开弹窗的父页面上下文，对应的是父页面的ScaffoldMessenger，所以SnackBar会渲染在父页面（也就是ModalBottomSheet的后方）。要让SnackBar显示在弹窗上方，必须使用弹窗内部的Scaffold对应的ScaffoldMessenger。

方案一：给XScreen内部添加Scaffold并使用GlobalKey（推荐） #

这种方式不需要修改弹窗的调用逻辑，仅在XScreen内部调整：

1. 在XScreen中定义全局Key：

class XScreen extends StatefulWidget {
  const XScreen({super.key});

  @override
  State<XScreen> createState() => _XScreenState();
}

class _XScreenState extends State<XScreen> {
  final GlobalKey<ScaffoldMessengerState> _snackBarKey = GlobalKey<ScaffoldMessengerState>();

  // ... 其他业务代码

2. 用Scaffold包裹XScreen的内容，并绑定key：

@override
Widget build(BuildContext context) {
  return ScaffoldMessenger(
    key: _snackBarKey,
    child: Scaffold(
      body: // 原来的XScreen页面内容
    ),
  );
}

3. 显示SnackBar时使用这个Key的状态：

final snackBar = SnackBar(
  elevation: 0,
  behavior: SnackBarBehavior.floating,
  backgroundColor: Colors.transparent,
  content: AwesomeSnackbarContent(
    title: 'Error!',
    message: 'Error message',
    contentType: ContentType.failure,
  ),
);

_snackBarKey.currentState?.showSnackBar(snackBar);

方案二：在ModalBottomSheet内部添加Scaffold并传递弹窗上下文 #

如果你的customModalBottomSheet是自定义方法，可以直接在弹窗内部套Scaffold，然后把弹窗的上下文传给XScreen：

1. 修改customModalBottomSheet的实现：

void customModalBottomSheet(BuildContext context, {required double height, required Widget child}) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (modalContext) {
      return SizedBox(
        height: height,
        child: Scaffold(
          body: child,
        ),
      );
    },
  );
}

2. 给XScreen添加构造参数接收弹窗上下文：

class XScreen extends StatelessWidget {
  final BuildContext modalContext;
  const XScreen({super.key, required this.modalContext});

  // ... 其他业务代码

3. 调用弹窗时传递上下文：

press: () {
  customModalBottomSheet(
    context,
    height: MediaQuery.of(context).size.height * 0.92,
    child: XScreen(modalContext: modalContext),
  );
},

4. 在XScreen中使用弹窗上下文调用SnackBar：

ScaffoldMessenger.of(modalContext)
  ..hideCurrentSnackBar()
  ..showSnackBar(snackBar);

注意事项 #

• 你已经设置了SnackBarBehavior.floating，这个配置是必要的，能确保SnackBar悬浮在内容上方，不会被弹窗底部遮挡。
• 方案一的代码更独立，适合需要复用XScreen的场景；方案二更适合弹窗和XScreen强绑定的场景。

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