Flutter：如何在带最小高度的模态底部弹窗上方显示Snackbar？

完全可以结合两种效果实现，核心是在弹窗内部嵌套Scaffold承载Snackbar，同时约束Scaffold的高度让弹窗保持最小尺寸，具体方案如下：

解决方案代码 #

await showModalBottomSheet(
  context: context,
  isScrollControlled: true, // 启用自适应高度，让弹窗仅占用内容所需的最小空间
  builder: (BuildContext context) {
    return Wrap(
      children: [
        Scaffold(
          backgroundColor: Colors.transparent, // 去除Scaffold默认背景，避免遮挡弹窗原生背景
          body: ListTile(
            title: const Text("Click me"),
            onTap: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Hello')),
              );
            },
          ),
        ),
      ],
    );
  },
);

关键原理说明 #

• isScrollControlled: true：让Modal Bottom Sheet不再强制占用固定高度，而是根据内容自动调整到最小高度，实现你需要的紧凑弹窗效果。
• 内部嵌套Scaffold：将Snackbar的挂载上下文切换到弹窗内部的Scaffold，这样Snackbar会显示在弹窗的上层，而不是被弹窗遮挡。
• 用Wrap包裹Scaffold：Scaffold默认会填充父容器的全部可用空间，Wrap会限制它仅占用内容所需的高度，避免弹窗被拉成全屏。如果需要自定义最小高度，也可以用ConstrainedBox替代Wrap，设置minHeight参数：

await showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return ConstrainedBox(
      constraints: const BoxConstraints(minHeight: 60), // 自定义最小高度
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: ListTile(
          title: const Text("Click me"),
          onTap: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Hello')),
            );
          },
        ),
      ),
    );
  },
);

这样既保留了弹窗的最小高度特性，又能让Snackbar正常显示在弹窗上方。

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