Flutter Adjustable Height BottomSheet

When You are adding default BottomSheet to flutter application there are certain difficulties you have to overcome. One is the heigh the sheet.

We cannot change the height of the sheet and the max height will be half of the screen. But we can customize the code of the bottom sheet to give full height.

First Create a new Dart File Called BottomSheetCustom and Copy the default bottom sheet code and Paste there. Then find the method getConstraintsForChild. In there we can change the Constrain values as below.


@override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    return BoxConstraints(
      minWidth: constraints.maxWidth,
      maxWidth: constraints.maxWidth,
      minHeight: 0.0,
      maxHeight: constraints.maxHeight,
    );
  }

Then change the method name of the showModalBottomSheet to showModalBottomSheetCustom. Then You can import the BottomSheetCustom and call the method showModalBottomSheetCustom and it shows the sheet on the entire screen.

If you want to adjust the bottomsheet height based on the content you can wrap the child widget inside SingleChildScrollView

Check the full Code

This is the article about basic BottomSheet

https://medium.com/flutterpub/flutter-5-bottom-sheet-2d56bf9f3bc

This Post Has One Comment

  1. Hi there, I check your blog like every week. Your writing style is awesome,
    keep it up!

Leave a Reply