如何移除Flutter中BottomSheet的默认高度限制？

默认情况下，showModalBottomSheet会限制底部弹窗的最大高度，当内容超出这个限制时就会触发RenderFlex溢出错误。要解除该限制并让MainAxisSize.min的Column正常扩展，只需两步操作：

1. 开启滚动控制模式
   在showModalBottomSheet中设置isScrollControlled: true，这个参数会取消BottomSheet的默认高度限制，允许它根据内容高度自适应扩展。

2. 添加滚动容器
   给外层Column套上SingleChildScrollView，确保内容超出屏幕高度时可以滚动，避免溢出。

修改后的代码示例 #

void gotoBottomSheet() {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true, // 解除默认高度限制
    builder: (context) {
      return bottomSheetView();
    },
  );
}

Widget bottomSheetView() {
  return SingleChildScrollView(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(width: 128, height: 128, color: Colors.black),
        Container(width: 128, height: 128, color: Colors.black),
        Container(width: 128, height: 128, color: Colors.black),
        // 可继续添加更多Container组件
      ],
    ),
  );
}

补充说明 #

• 设置isScrollControlled: true后，BottomSheet的高度不再受限于默认的屏幕占比，会完全适配内容高度（配合MainAxisSize.min）。
• SingleChildScrollView是必要的兜底方案，当内容高度超过屏幕剩余空间时，用户可以通过滚动查看全部内容，彻底避免溢出错误。

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