'Flutter Showing Snackbar On Top of Bottom Sheet

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:^[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:^[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:^[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:^[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;
           })
         );
    }
  }

Solution 5:^[5]

I solved this by changing bottomSheet to bottomNavigationBar since the floating snack bar solution didn't work for me.

Solution 6:^[6]

you can use flushbar package. I think this is the better option if need to use with bottomSheet.

any event inside bottomSheet

 CustomFlushBar().flushBar(text: 'Thank you for your payment!', context: context,duration: 2);

CustomFlushBar class

  class CustomFlushBar {
      void flushBar({int duration, @required String text, Color iconColor, IconData iconData, Color backgroundColor, @required BuildContext context}) async {
        await dismiss();
        Flushbar(
          margin: EdgeInsets.all(8),
          borderRadius: 8,
          backgroundColor: backgroundColor ?? Palette.greenButton,
          icon: Icon(iconData ?? Icons.done, color: iconColor ?? Palette.white),
          flushbarStyle: FlushbarStyle.FLOATING,
          message: text,
          duration: Duration(seconds: duration ?? 3),
        )..show(context);
      }
    
      Future<void> dismiss() async {
        if (!Flushbar().isDismissed()) {
          await Flushbar().dismiss();
        }
      }
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Samuel Drescher
Solution 2	Pablo Barrera
Solution 3
Solution 4	Paurakh Sharma Humagain
Solution 5	Lee Mordell
Solution 6	BIS Tech

'Flutter Showing Snackbar On Top of Bottom Sheet

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]