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.

回答1:

Lately I found an workaround for this. By setting the canvasColor property to Colors.transparent in your app's theme, we can make the BottomSheet's overlay disappear.

return new MaterialApp(
  title: 'MyApp',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
    canvasColor: Colors.transparent,
  ),
  //...
);

Once you set this up, you may use ClipRRect or Decoration with rounded corners.

回答2:

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 !

回答3:

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

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

回答4:

Default height for bottomSheet is half the screenSize

If you want your bottomSheet to expand according to content

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(
  color: forDialog ? Color(0xFF737373) : Colors.white,
  child: Container(
    decoration: new BoxDecoration(
    color: 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(
               color: forDialog ? Color(0xFF737373) : Colors.white,
                 child: Container(
                  decoration: new BoxDecoration(
                  color: Colors.white,
                    borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(25.0),
                          topRight: const Radius.circular(25.0))),
                    child: yourWidget(),
                 ),
              )
      ]
   )
 }
)

来源：https://stackoverflow.com/questions/48968176/how-do-you-adjust-the-height-and-borderradius-of-a-bottomsheet-in-flutter