How to adjust height of BottomSheet based on Content in Flutter

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

 

 

flutter course

 

 

https://mightytechno.com/flutter-rent-a-car-application/

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    x