SafeArea not working in persistent bottomsheet in Flutter

Question

I am using MaterialApp and Scaffold + SafeArea for screens. All works well until I try to use persistent BottomSheet. BottomSheet content igores SafeArea and are shown below system controls, for example in iPhone X.

I tried to wrap BottomSheet contents in another SafeArea element, but it did not help.

Is there a way to get the same functionality as SafeArea to work in BottomSheet? If yes then how?

Answer 1

Just make the root Widget of the showModalBottomSheet be a SafeArea Widget

showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[...

Answer 2

I have faced this issue too. When I changed code from showModalBottomSheet to _scaffoldKey.currentState.showBottomSheet my SafeArea stopped working.

You can solve it with these steps:

1. create key for your Scaffold GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
2. assign created key to your Scaffold key: _scaffoldKey,
3. set bottom padding to your bottom sheet padding: EdgeInsets.only(bottom: MediaQuery.of(_scaffoldKey.currentState.context).viewPadding.bottom)

Here is a result, I also added 15 padding to top, left and right.