How to decrease the bottomsheet height dynamically in flutter?

Question

i am using showModalBottomSheet and given the height of 90% at start. There are two tabs(repeat and onetime) inside bottomsheet, repeat tab has a lot of contents and it is showing perfectly fine with 90% height. But when i tab on onetime tab, i want to decrease the size of bottomsheet to 40% because it does not have more content in it and it does not look nice. But i am unable to change dynamically the height of bottom sheet on pressing onetime tab button.

Can anyone help me how can i achieve this functionality in flutter?

Upload your codes so we can understand it better. – Bilaal Abdel Hassan Jun 13 '20 at 16:23 — Bilaal Abdel Hassan, Jun 13 '20 at 16:23

score 9 · Answer 1 · answered Jun 13 '20 at 16:40

9

You can use the following code by replacing PutYourWidgetHere() with your custom widget.

void showBottomSheet() {
    showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: PutYourWidgetHere(),
              ));
        });
  }

answered Jun 13 '20 at 16:40

Sanjay Sharma

3,687
2
22
38

After adding the isScrollControlled I noticed that the bottom sheet was taking the height of my container (returned by the builder property), so I added a method to obtain the height depending on the screen size. Ty! – Ramiro G.M. Dec 21 '22 at 18:31

score 0 · Answer 2 · answered Oct 05 '22 at 06:54

dynamically the height and make content in center

showCupertinoModalBottomSheet(
  expand: false,
  enableDrag: true,
  isDismissible: true,
  barrierColor: ColorUtils.disableBackground.withAlpha(128),
  backgroundColor: ColorUtils.enableBackground,
  topRadius: Radius.circular(SizeUtils.minBlock * 4),
  context: globalKey.currentState!.context,
  builder: (builder) {
    return Padding(
        padding: EdgeInsets.all(SizeUtils.minBlock * 8),
        child: Container(
            constraints: BoxConstraints(
                minHeight: SizeUtils.blockHeight * 30,
                maxHeight: SizeUtils.blockHeight * 60),
            child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [SingleChildScrollView(child: widget)])));
  });

score 0 · Answer 3 · answered Jun 12 '23 at 07:18

You can take a look at the source code of _ModalBottomSheetLayout in showModalBottomSheet:

maxHeight: isScrollControlled
  ? constraints.maxHeight
  : constraints.maxHeight * 9.0 / 16.0,

The maxHeight is depended on isScrollControlled and constraints and it's default maxHeight is screenHeight's 9/16.

So you must assign the two properties to give dynamic maxHeight:

showModalBottomSheet(
  isScrollControlled: true,
  constraints: BoxConstraints(maxHeight: your dynamic height),
  ...
);

How to decrease the bottomsheet height dynamically in flutter?

3 Answers3