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"), ), ),);
- Set
isScrollControlled: true
andbackgroundColor: Colors.transparent
for the modal - Provide a
Container
with requiredheight:
as root widget to modal builder - Provide
BoxDecoration
with requiredborderRadius
for theContainer
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)))), ); }