bottomModalSheet 在平板电脑上不占据全宽

Question

我已经升级到新的 flutter 版本（3.19），在平板电脑上我无法使 BottomModalSheet 为 100% 宽。我尝试将 BoxConstrain 添加到宽度为 double.infinity 以及将 Expanded 添加为 BottomModalSheet 中的子项。

这是我的代码：

showModalBottomSheet<void>(
        backgroundColor: Colors.yellow,
        context: context,
        builder: (BuildContext context) {
          return Container(
            constraints: const BoxConstraints(
              minWidth: double.infinity,
              minHeight: double.infinity,
            ),
            width: MediaQuery.of(context).size.width,
            height:MediaQuery.of(context).size.height,
            //color: Colors.amber,
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  const Text('Modal BottomSheet'),
                  ElevatedButton(
                    child: const Text('Close BottomSheet'),
                    onPressed: () => Navigator.pop(context),
                  ),
                ],
              ),
            ),
          );

这是模态，我需要将其设为表格宽度的 100%

Answer 1

向 modalBottomSheet 添加约束

showModalBottomSheet(
context: context,
constraints: const BoxConstraints(
       maxWidth: double.infinity,
   ),
builder: (context){
return ModelBottomSheet();
}
);

Answer 2

在材质 3 中，底部纸张宽度默认限制为 640dp。

来自

constraints

的文档：

定义 BottomSheet 的最小和最大尺寸。

如果为 null，则将使用环境 ThemeData.bottomSheetTheme 的 BottomSheetThemeData.constraints。如果该值为 null 并且 ThemeData.useMaterial3 为 true，则底部工作表的最大宽度将为 640dp。如果 ThemeData.useMaterial3 为 false，则底部工作表的大小将受到其父级（通常是脚手架）的约束。在这种情况下，请考虑通过为大屏幕设置较小的约束来限制宽度。

要删除此最大宽度限制，请将

BoxConstraints.expand()

作为参数传递给

constraints

参数：

showModalBottomSheet(
  constraints: BoxConstraints.expand(),
  // ...
)

或者您可以使用未命名的构造函数设置自定义宽度和高度的最大/最小值：

showModalBottomSheet(
  constraints: BoxConstraints(
    maxWidth: ...,
    minWidth: ...,
    maxHeight: ...,
    minHeight: ...,
  ),
  // ...
)

Answer 3

用安全区域包裹容器并使用mediaquery设置容器的宽度

showModalBottomSheet<void>(
  backgroundColor: Colors.yellow,
  context: context,
  builder: (BuildContext context) {
    return SafeArea(
      child: Container(
        width: MediaQuery.of(context).size.width,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              const Text('Modal BottomSheet'),
              ElevatedButton(
                child: const Text('Close BottomSheet'),
                onPressed: () => Navigator.pop(context),
              ),
            ],
          ),
        ),
      ),
    );
  },
);