Show Flutter's SnackBar above a visible Drawer menu?
Asked Answered
S

2

11

I have a Scaffold with a simple Drawer in which I show a menu where a user can press a button. When this button is pressed I want to display a SnackBar, but the SnackBar is always displayed behind the Drawer. Is there some way to show it in front of the Drawer?

The drawer's code looks like:

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.lock_open),
            title: Text('Click Me'),
            onTap: () {
              Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text(
                'Test.',
              )));
            },
          ),
        ],
      ),
    );
  }
}

and it is used directly in the Scaffold:

    return Scaffold(
        drawer: MyDrawer(),
        [...]
Sprinkling answered 22/6, 2019 at 11:37 Comment(0)
E
1

They said Drawer must be on the top of UI under MaterialDesign rules. But if you wanna such behaviour too much you can write own SnackBar.

static void showSnackBarAsBottomSheet(BuildContext context, String message) 
{
    showModalBottomSheet<void>(
      context: context,
      barrierColor: const Color.fromRGBO(0, 0, 0, 0),
      builder: (BuildContext context) {
        Future.delayed(const Duration(seconds: 5), () {
          try {
            Navigator.pop(context);
          } on Exception {}
        });
        return Container(
            color: Colors.grey.shade800,
            padding: const EdgeInsets.all(12),
            child: Wrap(children: [
              Text(
                message,
                style:
                    GoogleFonts.robotoCondensed().copyWith(color: Colors.white),
              )
            ]));
      },
    );
  }
Edict answered 28/10, 2021 at 12:0 Comment(0)
P
-3

I've solved it by adding one more Scaffold inside Drawer and making its background transparent:

return Scaffold(
    drawer: Scaffold(
        backgroundColor: Colors.transparent,
        body: MyDrawer(),
    [...]
Pinnatipartite answered 25/9, 2019 at 8:4 Comment(1)
Doesn't work for me: Instead of showing the drawer, this just freezes the app (without particular error messages).Peonage

© 2022 - 2024 — McMap. All rights reserved.