Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I'm probably missing something obvious here, but my BottomSheet only takes up the bottom half the screen, even though the widgets in it take up more space. So now there is scrolling behavior inside the BottomSheet. I'd like to be able to increase the BottomSheet so that the user doesn't have to scroll as much.

I also want to add a borderRadius to the top of my BottomSheet, so that it looks more "modal"-y or "tab"-like.

Code:

void _showBottomSheet(BuildContext context) {     showModalBottomSheet<Null>(       context: context,       builder: (BuildContext context) {         return _bottomSheetScreen; // defined earlier on       },     ); } 

I've tried:

showModalBottomSheet<Null>(   context: context,   builder: (BuildContext context) {     return Container(       decoration: BoxDecoration(         borderRadius: _borderRadius,       ),       height: 1000.0,       child: _bottomSheetScreen,     );   }, ); 

but it seems like that only affects the contents inside the BottomSheet, and does not customize the BottomSheet itself.

like image 635
Mary Avatar asked Feb 24 '18 22:02

Mary


People also ask

How do you change the height of a bottomSheet in flutter?

You can use a Column Inside a SingleChildScrollView to dynamically change the height of the 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 ...

How do you increase the height of a showModalBottomSheet in flutter?

In showModalBottomSheet(...) set the property isScrollControlled:true . It will make bottomSheet to full height.

How do you shape a bottomSheet in flutter?

To make the Bottom Sheet with rounded corners, simply add the shape parameter inside the showModalBottomSheet function and assign the RoundedRectangleBorder() with the borderRadius property set to BorderRadius. vertical(top: Radius. circular(25.0),), .

How do you make your height dynamic in flutter?

To add 20 px: height + 20.0; To multiply just add a factor of your choice (can also be dynamic): height * 1.5 or height * dynamicFactor .


2 Answers

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(),                  ),               )       ]    )  } ) 
like image 138
Vicky Salunkhe Avatar answered Oct 06 '22 00:10

Vicky Salunkhe


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

like image 22
farhan ali Avatar answered Oct 05 '22 23:10

farhan ali