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

Answer 1

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

Answer 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.

Answer 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..'),
                ));

Answer 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;
           })
         );
    }
  }

Answer 5

I arrived on pretty decent solution. I wrapped my bottom sheet in a Scaffold, but I added it as the bottomSheet parameter. While adding the Scaffold, some trailing background will be added, so I just made its background transparent.

Scaffold(
  backgroundColor: Colors.transparent,
  bottomSheet: ...,
)

Answer 6

This is a working solution according to documentation. https://docs.flutter.dev/cookbook/design/snackbars

This example works with bottom sheets as well.

1. Initialize ScaffoldMessengerKey.
2. Wrap your component widget with Scaffold.
3. Wrap Scaffold with ScaffoldMessenger.
4. Add key scaffoldMessengerKey to ScaffoldMessenger
5. Call method scaffoldMessengerKey.currentState?.showSnackBar(SnackBar());

Example:

final scaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();


// Any widget with button. 
// (Bottom sheet also) - root widget must be ScaffoldMessenger.
ScaffoldMessenger(
  key: scaffoldMessengerKey,
  child: Scaffold(
    body: Container(
      child: ElevatedButton(
        style: raisedButtonStyle,
        onPressed: () { 
          scaffoldMessengerKey.currentState?.showSnackBar(
            //SnackBar design.
            SnackBar(
             backgroundColor: Colors.white,
             elevation: 8,
             content: Container(
               decoration: BoxDecoration(
                 color: Colors.white,
                 borderRadius: BorderRadius.circular(5),
               ),
               child: Text(
                 'Simple snackbar text.',
                 style: FlutterFlowTheme.of(context).bodyText1
                 .override(fontFamily: 'Rubik',
                          fontWeight: FontWeight.w300,
                          lineHeight: 1.5,
               ),
             ),
             action: SnackBarAction(
                label: 'Undo',
                onPressed: () {
                  // Some code to undo the change.
                },
             ),
             duration: Duration(seconds: 5),
             behavior: SnackBarBehavior.floating,
               
       },
       child: Text('Open snackbar over bottom sheet!'),
      ); //ElevatedButton
    ); //Container
  ); //Scaffold
); //ScaffoldMessenger

Note: With this approach you don't need to pass BuildContext.

If you don't want to register ScaffoldMessengerKey. You can show SnackBar like this: ScaffoldMessenger.of(context).showSnackBar(SnackBar());

Answer 7

I solved this problem with idle solution but it works

The Solution by 3 steps:

1 Add SizedBox and set the same height of BottomSheet
2 Add Scaffold as child of SizedBox
3 Add Your BottomSheet

SizedBox(
  height: ... ,// height of bottomSheet
  child: Scaffold(
       body: ... , // your bottomSheet
  )
)

Answer 8

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

Answer 9

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

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

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();
        }
      }
    }