Flutter:单页上有两 (2) 个抽屉？

Question

我有一个顶部栏，左侧(设置)和右侧(配置文件)带有图标。我需要一个抽屉根据单击的图标从左侧或右侧滑出。我的左侧(设置)工作正常，但我不明白如何在一个页面上有两个抽屉。

我相信拥有两个抽屉比根据所选链接以编程方式编辑抽屉更有意义，但我以前也经常犯错:)

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(
                'Support@GovMatrix.com',
                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),
          ),
        ),
      ),
    );
  }
}

Answer 1

看一下这个

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

输出: