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

Question

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 scro

Answer 1

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(),
                 ),
              )
      ]
   )
 }
)

Answer 2

here is the simplest code working in 2021

 showModalBottomSheet(
      context: context,
      isScrollControlled: true,  // <-- make bottom sheet resize to content height
      shape: RoundedRectangleBorder(  // <-- for border radius
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(15.0),
          topRight: Radius.circular(15.0),
        ),
      ),
      builder: (BuildContext context) {
       return Container() // <-- any widget you want
      });

Answer 3

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)))),
    );
  }

Answer 4

Use showBottomSheet instead of showModalBottomSheet

Create global key and a listener

final _scaffoldKey = new GlobalKey<ScaffoldState>();
VoidCallback _showPersBottomSheetCallBack;

Write your method to show the sheet

  void _showBottomSheet() {
    setState(() {
      _showPersBottomSheetCallBack = null;
    });

    _scaffoldKey.currentState
        .showBottomSheet((context) {
      return new Container(
        height: MediaQuery.of(context).size.height-100.0,
        color: Colors.greenAccent,
        child: new Center(
          child: new Text("Hi BottomSheet"),
        ),
      );
    })
        .closed
        .whenComplete(() {
      if (mounted) {
        setState(() {
          _showPersBottomSheetCallBack = _showBottomSheet;
        });
      }
    });
  }

initialize the listener

void initState() {
    super.initState();
    _showPersBottomSheetCallBack = _showBottomSheet;
  }

Call the method wherever you required

new RaisedButton(
                  onPressed: _showPersBottomSheetCallBack,
                  child: new Text("Persistent"),
                ),

Hope it helps !

Answer 5

You can adjust the height by setting the height of your main container either by a constant ex : 800 or by using MediaQuery ex :

if i want to show only 2 /3 of the screen

MediaQuery.of(context).size.height -
      (MediaQuery.of(context).size.height / 3)

for the radius first you have to set the

 showModalBottomSheet(
                          backgroundColor: Colors.transparent,

and then you container color to White or any color you wanted , example :

return Container(
  decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
          topLeft: const Radius.circular(16),
          topRight: const Radius.circular(16))),
  child:

Answer 6

In the above code by @Shyju Madathil you need to add key in scaffold to make it work

return new Scaffold(
  key: _scaffoldKey,
  ....