Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124


How to adjust the height of BottomSheet based on Content in Flutter

Adjust a height of the bottomsheet based on the content in flutter app

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.

          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 Full Code from Here