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:
- Is there an elegant way to have multiple drawers? or,
- 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(),
);
}