bottomModalSheet doesn't take full width on tablet

Question

I've upgraded to new flutter version(3.19) and on tablets I am unable to make the bottomModalSheet be 100% wide. I've tried adding BoxConstrain to width to be double.infinity as well as adding Expanded as child in bottomModalSheet.

Here is my code for it:

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),
                  ),
                ],
              ),
            ),
          );

Here is the modal, I need to make it 100% of the table width

Answer 1

Add constraints to modalBottomSheet

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

Answer 2

In Material 3, the bottom sheet width is limited to 640dp by default.

From the documentation of constraints:

Defines minimum and maximum sizes for a BottomSheet.

If null, the ambient ThemeData.bottomSheetTheme's BottomSheetThemeData.constraints will be used. If that is null and ThemeData.useMaterial3 is true, then the bottom sheet will have a max width of 640dp. If ThemeData.useMaterial3 is false, then the bottom sheet's size will be constrained by its parent (usually a Scaffold). In this case, consider limiting the width by setting smaller constraints for large screens.

To remove this max width constraint, pass BoxConstraints.expand() as the argument to the constraints parameter:

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

Or you can set custom maximum/minimum of width & height with the unnamed constructor:

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

Answer 3

wrap container with safe area and use mediaquery to set width of container

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),
              ),
            ],
          ),
        ),
      ),
    );
  },
);