基本概念

Drawer({
    Key key,
    double elevation: 16.0, 
    Widget child, 
    String semanticLabel
})

作用：Drawer（抽屉组件）可以实现类似抽屉拉出和推入的效果，可以从侧边栏拉出导航面板。通常Drawer是和ListView组件组合使用的。

Drawer组件可以添加头部效果，用DrawerHeader（展示基本信息）和UserAccountsDrawerHeader（展示用户头像、用户名、Email等信息）这两个组件可以实现。

关于DrawerHeader和UserAccountsDrawerHeader

DrawerHeader({
    Key key, 
    Decoration decoration, //动画持续时间
    EdgeInsetsGeometry margin: const EdgeInsets.only(bottom: 8.0), EdgeInsetsGeometry padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0), 
    Duration duration: const Duration(milliseconds: 250), 
    Curve curve: Curves.fastOutSlowIn, //动画慢进进快出
    @required Widget child
})

UserAccountsDrawerHeader({
    Key key, 
    Decoration decoration, 
    EdgeInsetsGeometry margin: const EdgeInsets.only(bottom: 8.0), Widget currentAccountPicture, //用户头像
    List<Widget> otherAccountsPictures, //其他头像
    @required Widget accountName, //名称
    @required Widget accountEmail, //邮箱
    VoidCallback onDetailsPressed, //查看详情的回调
    Color arrowColor: Colors.white
})

实例

 Scaffold(
    appBar: AppBar(
        leading: Builder( //自定义抽屉图标
          builder: (BuildContext context){
            return InkWell(
                child: Container(
                    padding: EdgeInsets.all(15),
                    child: ClipOval(
                      child: Image.asset(
                        'lib/assets/images/avatar.png',
                      ),
                    )
                  ),
                onTap: (){//打开抽屉
                    Scaffold.of(context).openDrawer();
                },
            );
          }
        ),
        title: Text('测试抽屉组件'),
        centerTitle: true,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search), 
            onPressed: (){}
          )
        ],
    ),
    drawer: Drawer(
      child: ListView(
        padding: EdgeInsets.zero, //注意设置0
        children: <Widget>[
          UserAccountsDrawerHeader(
            currentAccountPicture: GestureDetector(
                child: ClipOval(
                  child: Image.asset('lib/assets/images/avatar.png'),
                ),
            ),
            otherAccountsPictures: <Widget>[
                IconButton(
                  icon: Icon(Icons.stars, color: Colors.white),
                  onPressed: (){}
                )
            ],
            accountName: Text(
                '我是小鱼', 
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 40),
            ), 
            accountEmail: Text(YStrings.github),
            onDetailsPressed: (){},
          ),
          ListTile(
            leading: Icon(Icons.color_lens),
            title: Text('测试1'),
            trailing: Icon(Icons.chevron_right),
            onTap: (){},
          ),
          ListTile(
            leading: Icon(Icons.share),
            title: Text('测试2'),
            trailing: Icon(Icons.chevron_right),
            onTap: (){},
          ),
          ListTile(
            leading: Icon(Icons.info_outline),
            title: Text('测试3'),
            trailing: Icon(Icons.chevron_right),
            onTap: (){},
          ),
        ],
      ),
    )
 )

注意：添加Drawer组件，Scaffold会自动给我们生成一个Drawer的按钮，如果我们在appBar中手动设置leading，确实是会更改这个按钮的图标，但是点击这个图标就不会弹出Drawer了，所以如果我们有需要自定义Drawer的图标

效果图