Flutter showModalBottomSheet等弹窗宽度问题

hxy06012026-06-09 11:35

在iPad、手机横屏或大屏幕设备上，Flutter 的 showModalBottomSheet 默认会有一个最大宽度限制（通常是 640dp），并且会居中显示，这就导致展示的弹窗会出现两边空白的问题。

如果你想要让它跟屏幕尺寸完全同宽 ，可以通过调整 constraints 或者自定义 routeSettings 来打破这个默认限制。这篇文章中只给出设置属性来突破限制

设置 constraints 属性

从 Flutter 较新的版本开始，showModalBottomSheet 直接提供了 constraints 属性。你可以通过它将最大宽度强行设置为无穷大，让它撑满屏幕。

Flutter/Dart 复制代码

showModalBottomSheet(
    context: context, 
    // 如果内容较多或有输入框，建议开启 
    isScrollControlled: true, 
    // --- 关键代码：解除最大宽度限制 --- 
    constraints: const BoxConstraints(
            maxWidth: double.infinity, 
        ), 
    builder: (BuildContext context) { 
        return Container( 
                    width: double.infinity, 
                    // 确保内部容器也撑满 
                    decoration: const BoxDecoration( 
                                    color: Colors.white, 
                                    borderRadius: BorderRadius.vertical(
                                        top:Radius.circular(16)),
                                    ), 
                     child: SizedBox.shrink(), // 你的弹窗内容 
                  ); 
     }, 
 );

2：全局Theme统一修改

如果你希望 App 里所有的底部弹窗在 iPad 上都默认同宽，不想要每个都去写一遍 constraints，可以在你的 MaterialApp 的 ThemeData 中进行全局配置：

Flutter/Dart 复制代码

MaterialApp(
  theme: ThemeData(
    // --- 全局配置 BottomSheet 主题 ---
    bottomSheetTheme: const BottomSheetThemeData(
      constraints: BoxConstraints(
        maxWidth: double.infinity,
      ),
    ),
  ),
  home: HomePage(),
);