Show Flutter's SnackBar above a visible Drawer menu?

user_109219 0
Viewed 1593

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(),
        [...]
navigation-drawer flutter
2 Answers

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),
              )
            ]));
      },
    );
  }
user_48186780

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(),
    [...]
user_102487210
Related