Flutter: Two (2) drawers on a single page?

Question

I have a top bar with icons on the left (settings) and right (profile). I need a drawer to slide out from either the left or right depending on the icon clicked. I have the left side (settings) working correctly however I don't understand how to have two drawers on a single page.

I believe having two drawers makes more sense than programmatically editing the drawers based upon the link selected but then again I've been wrong before and often :)

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GovMatrix',
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.black,
        accentColor: Colors.grey,
        //canvasColor: Colors.grey[300],
        //canvasColor: Colors.transparent,
        canvasColor: Colors.transparent,
        fontFamily: 'Calibri',
        textTheme: TextTheme(
          headline: TextStyle(
            fontSize: 72.0,
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
          title: TextStyle(
            fontSize: 36.0,
            color: Colors.black,
            fontStyle: FontStyle.normal,
          ),
          body1: TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
        ),
      ),
      home: BottomNavBar(),
    );
  }
}

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _page = 0;

  @override
  Widget build(BuildContext context) {
    String title = "GovMatrix";
    return Scaffold(
      appBar: AppBar(
        title: Text("GovMatrix"),
        actions: <Widget>[
          Padding(
            padding: const EdgeInsets.all(14.0),
            child: Icon(Icons.account_circle),
          ),
        ],
        elevation: 50.0,
      ),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget>[
            new UserAccountsDrawerHeader(
              accountName: new Text(
                'Guest Client',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w800,
                  color: Colors.grey[300],
                ),
              ),
              accountEmail: Text(
                '[email protected]',
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  color: Colors.grey[300],
                ),
              ),
              /*currentAccountPicture: new CircleAvatar(
                child: Image.asset('assets/images/guest_icon_1.png'),
              ),*/
            ),
            new ListTile(
              title: new Text(
                'Profile',
                style: TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
              leading: new Icon(
                Icons.person,
                size: 26.0,
                color: Colors.white,
              ),
            ),
            /*new Divider(
              color: Colors.white,
            ),*/
            new ListTile(
              title: new Text(
                'Notifications',
                style: TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
              leading: new Icon(
                Icons.notifications,
                size: 26.0,
                color: Colors.white,
              ),
            ),
            /*new Divider(
              color: Colors.white,
            ),*/
            new ListTile(
              title: new Text(
                'Settings',
                style: TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
              leading: new Icon(
                Icons.settings,
                size: 26.0,
                color: Colors.white,
              ),
            ),
            /*new Divider(
              color: Colors.white,
            ),*/
            new ListTile(
              title: new Text(
                'Log Out',
                style: TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
              leading: new Icon(
                Icons.lock,
                size: 26.0,
                color: Colors.white,
              ),
            ),
            /*new Divider(
              color: Colors.white,
            ),*/
            new ListTile(
              title: new Text(
                'Close Menu',
                style: TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
              leading: new Icon(
                Icons.close,
                size: 26.0,
                color: Colors.white,
              ),
            ),
            /*new Divider(
              color: Colors.white,
            ),*/
          ],
        ),
      ),
      bottomNavigationBar: CurvedNavigationBar(
        index: 0,
        height: 75.0,
        color: Colors.black,
        items: <Widget>[
          Icon(Icons.library_books, color: Colors.white, size: 30),
          Icon(Icons.calendar_today, color: Colors.white, size: 30),
          Icon(Icons.people, color: Colors.white, size: 30),
          Icon(Icons.check_box, color: Colors.white, size: 30),
          Icon(Icons.find_in_page, color: Colors.white, size: 30),
        ],
        buttonBackgroundColor: Colors.black,
        backgroundColor: Colors.grey[300],
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 400),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
      body: Container(
        color: Colors.grey[300],
        child: Center(
          child: Text(
            _page.toString(),
            textScaleFactor: 10.0,
            style: TextStyle(color: Colors.black),
          ),
        ),
      ),
    );
  }
}

Solution

Check this out

import 'package:flutter/material.dart';

class TwoDrawers extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("2 Drawers"),
        leading: Builder(
          builder: (context){
            return IconButton(
              icon: Icon(Icons.settings),
              onPressed: (){
                Scaffold.of(context).openDrawer();
              },
            );
          },
        ),
        actions: <Widget>[
          Builder(
            builder: (context){
              return IconButton(
                icon: Icon(Icons.person),
                onPressed: (){
                  Scaffold.of(context).openEndDrawer();
                },
              );
            },
          )
        ],
      ),
      drawer: Drawer(
        child: Container(
          color: Colors.blue,
          child: Center(
            child: Text(
              "Settings",
              style: TextStyle(
                color: Colors.white,
                fontSize: 30
              ),
            ),
          ),
        ),
      ),
      endDrawer: Drawer(
        child: Container(
          color: Colors.red,
          child: Center(
            child: Text(
              "Profile",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 30
              ),
            ),
          ),
        ),
      ),
    );
  }
}

The output: