Flutter modal_bottom_sheet包：如何设置模态底部弹窗最大宽度？

当然可以设置Web端模态底部弹窗的最大宽度，核心思路是在弹窗的内容外层包裹宽度限制容器，结合Flutter布局组件就能实现，以下是两种实用方案：

方式一：固定最大宽度 + 居中对齐 #

用ConstrainedBox或Container给内容设置最大宽度，再通过Center让弹窗居中，避免占满浏览器宽度：

showModalBottomSheet(
  context: context,
  isScrollControlled: true, // 可选，开启后弹窗高度可自适应内容
  builder: (context) {
    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(
          maxWidth: 600, // 自定义最大宽度
          maxHeight: 800, // 可选，限制弹窗最大高度
        ),
        child: Container(
          width: double.infinity,
          padding: const EdgeInsets.all(16),
          color: Colors.white, // 设置背景色区分页面内容
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Web端自定义宽度的模态底部弹窗"),
              ElevatedButton(
                onPressed: () => Navigator.pop(context),
                child: const Text("关闭"),
              ),
            ],
          ),
        ),
      ),
    );
  },
);

方式二：响应式适配（小屏幕占满，大屏幕限宽） #

兼顾移动端和Web端的响应式效果，用LayoutBuilder获取父容器宽度，动态调整弹窗宽度：

showModalBottomSheet(
  context: context,
  builder: (context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final screenWidth = constraints.maxWidth;
        // 屏幕宽度大于768时限制宽度为700，否则占满屏幕
        final targetWidth = screenWidth > 768 ? 700 : screenWidth;
        
        return Center(
          child: Container(
            width: targetWidth,
            padding: const EdgeInsets.all(16),
            color: Colors.white,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text("响应式模态底部弹窗"),
                ElevatedButton(
                  onPressed: () => Navigator.pop(context),
                  child: const Text("关闭"),
                ),
              ],
            ),
          ),
        );
      },
    );
  },
);

关键注意点 #

• 开启isScrollControlled: true后，弹窗可根据内容高度自适应，配合宽度限制体验更好
• 务必给容器设置背景色，避免弹窗内容和页面背景混淆
• 可添加BorderRadius属性给弹窗设置圆角，优化Web端视觉效果

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