Flutter之侧边栏Drawer、DrawerHeader、UserAccountsDrawerHeader

Drawer是Scaffold的子组件，在Scaffold传入drawer参数可以定义左侧栏，传入endDrawer可以定义右侧边栏。

除了Drawer还有DrawerHeader用来定义侧边栏的头部部分，也可以使用Flutter官方的UserAccountsDrawerHeader来布局侧边栏的头部。

import 'package:flutter/material.dart';

class DrawerPage extends StatelessWidget {
  DrawerPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer"),
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: DrawerHeader(
                    child: Center(
                      child: Text(
                        "DrawerHeader",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: NetworkImage(
                                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583300044647&di=a57913cf008aa11667ff406a25c2aab0&imgtype=0&src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F706%2F427%2F971%2Ff30f03169a5a4152bf009722b3387f2f.jpg"),
                            fit: BoxFit.cover)),
                  ),
                )
              ],
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text("个人中心"),
            ),
            Divider(),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text("设置"),
            ),
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: UserAccountsDrawerHeader(
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              image: NetworkImage(
                                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583300520695&di=416840a99f6c335ece6a05372f3abb81&imgtype=0&src=http%3A%2F%2Fimg.shu163.com%2Fuploadfiles%2Fwallpaper%2F2010%2F6%2F2010070806112343.jpg"))),
                      accountEmail: Text("[email protected]"),
                      accountName: Text("请叫我川子哥"),
                      currentAccountPicture: CircleAvatar(
                          backgroundImage: NetworkImage(
                              "https://avatar.csdnimg.cn/2/2/B/2_u013600907.jpg"))),
                )
              ],
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text("朋友圈"),
              onTap: (){
                Navigator.of(context).pop();
                Navigator.pushNamed(context, "/moments");
              },
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text("设置"),
            ),
          ],
        ),
      ),
    );
  }
}