Flutter Drawer侧边栏,DrawerHeader以及UserAccountsDrawerHeader

DrawerHeader

import 'package:flutter/material.dart';

class DrawerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DrawerDemo'),
      ),
      body: Center(
        child: Text('data'),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: DrawerHeader(
                    child: Text('Hello World'),
                    decoration: BoxDecoration(//头部颜色或者图片
                      //color: Colors.amber
                      image: DecorationImage(
                        image: NetworkImage('http://5b0988e595225.cdn.sohucs.com/images/20171108/e8d0b0ab35b14b33a499d74cbc52b43c.jpeg'),
                        fit: BoxFit.cover
                      ),
                    ),
                  ),
                )
              ],
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.person),
              ),
              title: Text('我的空间'),
            ),
            Divider(),//横线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.person),
              ),
              title: Text('用户中心'),
            ),
            Divider(),//横线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.person),
              ),
              title: Text('附近的人'),
            ),
            Divider(),//横线
          ],
        ),
      )
    );
  }
}

UserAccountsDrawerHeader

import 'package:flutter/material.dart';

class DrawerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DrawerDemo'),
      ),
      body: Center(
        child: Text('data'),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: UserAccountsDrawerHeader(
                    accountName: Text('GodKun',style: TextStyle(color: Colors.white)),
                    accountEmail: Text('[email protected]',style: TextStyle(color: Colors.white)),
                    currentAccountPicture: CircleAvatar(//圆形图片
                      backgroundImage: NetworkImage('http://5b0988e595225.cdn.sohucs.com/images/20171108/ba1b73bec9784b9eae4416226abcddc7.jpeg'), //头像
                    ),
                    decoration: BoxDecoration(//顶部背景颜色或者图片
                      //color: Colors.amber
                      image: DecorationImage(
                          image: NetworkImage('http://5b0988e595225.cdn.sohucs.com/images/20171108/e8d0b0ab35b14b33a499d74cbc52b43c.jpeg'),
                          fit: BoxFit.cover
                      ),
                    ),
                    otherAccountsPictures: <Widget>[//当前用户其他账号的头像
                      //http://5b0988e595225.cdn.sohucs.com/images/20171108/d29a69f9c7fc41d1aae4516df8ebfac3.jpeg
                      Image.network('http://5b0988e595225.cdn.sohucs.com/images/20171108/fb469ca492a146fd8476fb144cd11f2c.jpeg'),
                      Image.network('http://5b0988e595225.cdn.sohucs.com/images/20171108/d29a69f9c7fc41d1aae4516df8ebfac3.jpeg'),
                      Image.network('http://5b0988e595225.cdn.sohucs.com/images/20171108/d29a69f9c7fc41d1aae4516df8ebfac3.jpeg'),
                    ],
                  )
                )
              ],
            ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.add_photo_alternate),
              ),
              title: Text('我的空间'),
            ),
            Divider(),//横线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.account_box),
              ),
              title: Text('用户中心'),
            ),
            Divider(),//横线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.person),
              ),
              title: Text('附近的人'),
            ),
            Divider(),//横线
          ],
        ),
      )
    );
  }
}

侧边栏路由跳转

            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.add_photo_alternate),
              ),
              title: Text('我的空间'),
              onTap: (){
                Navigator.of(context).pop();//加上这句代码，返回时会自动隐藏侧边栏
                Navigator.pushNamed(context, '/Search');
              },
            ),