Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – bottomModalSheet doesn't take full width on tablet

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
enter image description here

Tags:

2

Answers


  1. 0

    Add constraints to modalBottomSheet

    showModalBottomSheet(
context: context,
constraints: const BoxConstraints(
       maxWidth: double.infinity,
   ),
builder: (context){
return ModelBottomSheet();
}
);
    Login or Signup to reply.
  2. 0

    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: ...,
  ),
  // ...
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search