Flutter Showing Snackbar On Top of Bottom Sheet

Question

In my code I call a bottom sheet to display a list of tiles. These tiles contain buttons that display a snackbar. That functionality works fine, the only issue is that the snackbar is displayed behind the bottom sheet so you can only see it if you close the bottom sheet. Each of them are called with the following code:

1. Bottom Sheet:

  void _settingModalBottomSheet(context, stream, scaffoldKey ) {
    if (_availableRides.length == 0) {
      return null;
    } else {
      return scaffoldKey.currentState.showBottomSheet((context) {
        return Column(
          children: Widgets;
      });
    }
  }

2. Snackbar

widget.scaffoldKey.currentState.showSnackBar(SnackBar(
         content: Text("Created", textAlign: 
    TextAlign.center,),),

Does anyone know how I can position the snackbar in front of the bottom sheet

Solution 1

So I was able to solve this by just adding another Scaffold() to my Bottom sheet and passing it a new scaffold key

Solution 2

SnackBar has a property for this. It's called behavior, you could do this:

SnackBar(
    behavior: SnackBarBehavior.floating,
    ...

SnackBarBehavior enum

floating → const SnackBarBehavior

This behavior will cause SnackBar to be shown above other widgets in the Scaffold. This includes being displayed above a BottomNavigationBar and a FloatingActionButton.

See material.io/design/components/snackbars.html for more details.

Solution 3

I solved by Set (padding from bottom to SnackBar) As much as the height of the (bottomSheet : height) .

In This Case I Have This bottomSheet:

bottomSheet: Container(
          child: RaisedButton(...),
          width: MediaQuery.of(context).size.width,
          height: AppBar().preferredSize.height * 0.85,
        ),

And This snackBar:

_scaffoldKey.currentState.showSnackBar(SnackBar(
padding:EdgeInsetsDirectional.only(
bottom:AppBar().preferredSize.height * 0.85),
backgroundColor: Colors.red,
duration: new Duration(milliseconds: 3000),
content: Text('ETC..'),
                ));

Solution 4

You can achieve this Simply by wrapping your BottomSheet widget with a Scaffold.

eg:

 void _settingModalBottomSheet(context, stream, scaffoldKey ) {
    if (_availableRides.length == 0) {
      return null;
    } else {
      return scaffoldKey.currentState.showBottomSheet((context) {
        return Scaffold(
           body: Column(
             children: Widgets;
           })
         );
    }
  }

View more solutions

Comments

[Nato Boram]

Oh, my god. I just refactored to use a GlobalKey<ScaffoldState> everywhere to show a SnackBar because BottomSheet doesn't have access to its parent Scaffold, and now I have to trash everything.

[Andrei Volgin]

Unfortunately, it shows higher than a bottom sheet and even a FAB, which looks weird. I wish there was an option to show it at the bottom, as in SnackBarBehavior.fixed, but over the bottom sheet.

[M.Yogeshwaran]

can you share some snippet

[BIS Tech]

@AnandKumar context should be your page's context, not bottomsheet context

[Kamlesh]

Sorry to say, but suggested solution did not work for me. Thanks.

[Kamlesh]

Where did you make this change? kindly share. Thanks.

[Lee Mordell]

Scaffold has both bottomSheet and bottomNavigationBar properties. When the scaffold had a bottomSheet widget, the snackbar would not display in front of the widget. When I changed it to bottomNavigation bar, the snackbar displayed in front of the widget.

[Kamlesh]

I already have a bottomNavigationBar, bottomModelSheet and snackbar. bottomModelSheet is displaying as overlay of bottomNavigationBar which is working. But when I want to show snackbar over the bottomModelSheet it does not displayed. Snackbar is displayed between bottomNavigationBar and bottomModelSheet. If you have any experience of it. Kindly share your thoughts. Thanks a lot.