Flutter Showing Snackbar On Top of Bottom Sheet

Samuel Drescher picture Samuel Drescher · Mar 13, 2019 · Viewed 7.1k times · Source

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

Answer

Pablo Barrera picture Pablo Barrera · Oct 21, 2019

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.