Flutter中使用Drawer组件实现滑动弹出侧边栏

一、Flutter Drawer

Flutter中使用Drawer组件可以实现滑动弹出侧边栏，在Scaffold组件里面传入drawer参数可以定义左侧边栏，传入endDrawer可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。

return Scaffold(
        appBar: AppBar(
          title: Text("Flutter App"),
        ),
      
        drawer: Drawer(
          child: Text('左侧边栏'),
        ),
        endDrawer:  Drawer(
          child: Text('右侧侧边栏'),
        ),
);

二、Flutter DrawerHeader

属性	描述
decoration	设置顶部背景颜色
child	配置子元素
padding	内边距
margin	外边距

drawer: Drawer(
          child: Column(
            children: <Widget>[

              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.yellow,
                  image:DecorationImage(
                    image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
                    fit:BoxFit.cover
                  )
                  
                ),
                child: ListView(
                  children: <Widget>[
                    Text('我是一个头部')
                  ],
                ),
              ),
              ListTile(
                title: Text("个人中心"),
                leading: CircleAvatar(
                  child: Icon(Icons.people)
                ),
              ),
              Divider(),
              ListTile(
                title: Text("系统设置"),
                leading: CircleAvatar(
                  child: Icon(Icons.settings)
                ),
              )
            ],
          )
)

三、Flutter UserAccountsDrawerHeader

属性	描述
decoration	设置顶部背景颜色
accountName	账户名称
accountEmail	账户邮箱
currentAccountPicture	用户头像
otherAccountsPictures	用来设置当前账户其他账户头像
margin

drawer: Drawer(
          child: Column(
            children: <Widget>[

              UserAccountsDrawerHeader(
                  accountName:Text("大地老师") ,
                  accountEmail:Text("dadi@itying.com") ,
                  currentAccountPicture: CircleAvatar(
                    backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),

                  ),
                  decoration: BoxDecoration(
                    color: Colors.yellow,
                    image:DecorationImage(
                      image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
                      fit:BoxFit.cover
                    )
                    
                  ),
                  otherAccountsPictures: <Widget>[
                    Image.network("https://www.itying.com/images/flutter/4.png"),
                    Image.network("https://www.itying.com/images/flutter/5.png"),
                    Image.network("https://www.itying.com/images/flutter/6.png")
                  ],           

              ),
              ListTile(
                title: Text("个人中心"),
                leading: CircleAvatar(
                  child: Icon(Icons.people)
                ),
              ),
              Divider(),
              ListTile(
                title: Text("系统设置"),
                leading: CircleAvatar(
                  child: Icon(Icons.settings)
                ),
              )
            ],
          )
        )

四、Flutter侧边栏中实现路由跳转

onTap: (){
       Navigator.of(context).pop();
       Navigator.pushNamed(context, '/search');
}