Flutter中如何让透明模态框的Scaffold自适应子组件高度？

要兼顾官方最佳实践（使用Scaffold避免SnackBar等框架功能异常）和弹窗高度自适应需求，可通过以下方式实现：

核心方案 #

将Scaffold包裹在SingleChildScrollView中，同时保持showModalBottomSheet的isScrollControlled: true参数，既保留Scaffold的完整功能，又让弹窗高度自适应内容。

修改后的代码示例 #

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  useSafeArea: true, // 可选，适配底部安全区域
  builder: (BuildContext ctx) {
    return BottomModal();
  },
);

class BottomModal extends HookWidget {
  const BottomModal({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Scaffold(
        appBar: AppBar(title: const Text("Modal")),
        body: SizedBox(height: Random().nextInt(151) + 250), // 任意高度的内容
      ),
    );
  }
}

原理说明 #

1. SingleChildScrollView：强制Scaffold仅占据内容所需的高度，而非扩展至全屏。
2. isScrollControlled: true：允许弹窗内容根据高度自适应，避免被固定高度限制。
3. Scaffold保留：确保AppBar、SnackBar等框架功能正常工作，符合官方最佳实践。

如果内容高度可能超过屏幕范围，SingleChildScrollView还能自动提供滚动能力，避免内容溢出。

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