How do you adjust the height and borderRadius of a BottomSheet in Flutter? How do you adjust the height and borderRadius of a BottomSheet in Flutter? flutter flutter

How do you adjust the height and borderRadius of a BottomSheet in Flutter?


Default height for bottomSheet is half the screenSize

If you want your bottomSheet to EXPAND according to your content DYNAMICALLY

use below code

showModalBottomSheet<dynamic>(isScrollControlled: true,context: context,builder: (BuildContext bc) {  return Wrap(      children: <Widget>[...]  ) })

This will automatically expand the bottomSheet according to content inside.

For adding a radius on top of bottomSheet return below code to `bottomSheet'

Container(  child: Container(    decoration: new BoxDecoration(      color: forDialog ? Color(0xFF737373) : Colors.white,      borderRadius: new BorderRadius.only(            topLeft: const Radius.circular(25.0),            topRight: const Radius.circular(25.0))),      child: yourWidget(),   ),)

Complete code meeting both requirements

showModalBottomSheet<dynamic>(isScrollControlled: true,context: context,builder: (BuildContext bc) {  return Wrap(      children: <Widget>[          Container(                 child: Container(                  decoration: new BoxDecoration(                    color: forDialog ? Color(0xFF737373) : Colors.white,                    borderRadius: new BorderRadius.only(                          topLeft: const Radius.circular(25.0),                          topRight: const Radius.circular(25.0))),                    child: yourWidget(),                 ),              )      ]   ) })


It's possible this way

showModalBottomSheet(  context: context,  isScrollControlled: true,  backgroundColor: Colors.transparent,  builder: (context) => Container(    height: MediaQuery.of(context).size.height * 0.75,    decoration: new BoxDecoration(      color: Colors.white,      borderRadius: new BorderRadius.only(        topLeft: const Radius.circular(25.0),        topRight: const Radius.circular(25.0),      ),    ),    child: Center(      child: Text("Modal content goes here"),    ),  ),);
  1. Set isScrollControlled: true and backgroundColor: Colors.transparent for the modal
  2. Provide a Container with required height: as root widget to modal builder
  3. Provide BoxDecoration with required borderRadius for the Container

Sample Screenshot


You can use a Column Inside a SingleChildScrollView to dynamically change the height of bottom sheet and also it gets scrollable once it exceeds the available max height, make sure the isScrollControlled is set to true,And for the border radius the shape property will help you add the borderRadius to the bottomsheet.here's a dartpad example for the same

  Future<void> _showBottomSheet() async {    return showModalBottomSheet(      isScrollControlled: true,      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(13)),      backgroundColor: Colors.white,      context: context,      builder: (context) => SingleChildScrollView(          child: Column(              crossAxisAlignment: CrossAxisAlignment.center,              children: List.generate(kBoxes, (index) => _squareBox(index)))),    );  }