Multiple (3) contextual drawers in Flutter

Viewed 448

I'm looking for a way to have multiple contextual drawers in Flutter. So far I've been able to have two drawers - one on the left, and one on the right. However, what I really want to accomplish is to have multiple contextual drawer menu via the action buttons on the top right.

With the limitation of two drawers by default, I tried to "swap" the endDrawer programatically. I wasn't able to accomplish this because the drawer widget is "final". So, then the next set of solution is to perhaps rebuild the internal structure of the drawer. But I don't know how to do this as I'm still new to flutter.

So my question is:

  1. Is there an elegant way to have multiple drawers? or,
  2. Given a widget, how do I rebuild its internal?
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          // Menu 1
          Builder(builder: (context) => IconButton(icon: Icon(Icons.filter_alt),onPressed: () {
            ScaffoldState scaffoldState = Scaffold.of(context);

            // I'm trying to rebuild the drawer here
            //scaffoldState.widget.drawer.build...

            scaffoldState.openEndDrawer();
          },),),
          // Menu 2
          Builder(builder: (context) => IconButton(icon: Icon(Icons.filter_alt),onPressed: () {
            ScaffoldState scaffoldState = Scaffold.of(context);

            // I'm trying to rebuild the drawer here
            //scaffoldState.widget.drawer.build...

            scaffoldState.openEndDrawer();
          },),),
          // Menu 3
          Builder(builder: (context) => IconButton(icon: Icon(Icons.filter_alt),onPressed: () {
            ScaffoldState scaffoldState = Scaffold.of(context);

            // I'm trying to rebuild the drawer here
            //scaffoldState.widget.drawer.build...

            scaffoldState.openEndDrawer();
          },),),
        ]
        //actions: [Icon(Icons.notifications)],
      ),
      drawer: Drawer(
        child: Drawer(
          child: ListView(
            // Important: Remove any padding from the ListView.
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),

              ListTile(
                title: Text('Left Menu Item 1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),

              ListTile(
                title: Text('Left Menu Item 2'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      ),
      endDrawer: Drawer(
        child: Drawer(
          child: ListView(
            // Important: Remove any padding from the ListView.
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header 2'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),

              ListTile(
                title: Text('Right Menu Item 1'),
                onTap: () {
                  Navigator.pop(context);
                  // Update the state of the app.
                  // ...
                },
              ),
              ListTile(
                title: Text('Right Menu Item 2'),
                onTap: () {
                  Navigator.pop(context);
                  // Update the state of the app.
                  // ...
                },
              ),

            ],
          ),
        ),
      ),
      body: Center(),
    );
  }
1 Answers

I am pretty new to flutter but I faced the same problem. Couldn't find a way to make 3 drawers but found an alternative that might or might not be what you want.

showModalBottomSheet opens up a sheet (a lot like a drawer) from the bottom and you can add as many of these as you like. You can view the documentation here.

Related