flutter10:侧边栏

侧边栏：

import 'package:flutter/material.dart';

class Drawers extends StatefulWidget {
  @override
  _DrawersState createState() => _DrawersState();
}

class _DrawersState extends State<Drawers> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                // child: DrawerHeader(  //侧边栏头部
                //   child: Text('这是侧边栏头部'),
                //   decoration: BoxDecoration(
                //     color: Color.fromRGBO(255, 99, 57, 1),
                //     image: DecorationImage(
                //       image: AssetImage('./assets/images/walletbg.png'),
                //       fit: BoxFit.cover
                //     ),
                //   ),
                // ),
                child: UserAccountsDrawerHeader(
                  accountName: Text('小猫猫'),
                  accountEmail: Text('1234567899@qq.com'),
                  currentAccountPicture: CircleAvatar(
                    backgroundImage: AssetImage('./assets/images/track_icon.png'),
                  ),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(255, 99, 57, 1),
                    image: DecorationImage(
                      image: AssetImage('./assets/images/walletbg.png'),
                      fit: BoxFit.cover
                    ),
                  ),
                  
                ),
              )
            ],
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundColor: Colors.pink,
              child: Icon(Icons.home),
            ),
            title: Text('我的消息'),
          ),
          Divider(color: Colors.grey,),
          ListTile(
            leading: CircleAvatar(
              child: Icon(Icons.people),
            ),
            title: Text('用户中心'),
            onTap: (){
              Navigator.of(context).pop();//隐藏侧边栏
              Navigator.pushNamed(context, '/user');
            },
          ),
          Divider(color: Colors.grey,),//分割线
          ListTile(
            leading: CircleAvatar(
              child: Icon(Icons.settings),
            ),
            title: Text('设置'),
          ),
        ],
      ),
    );
  }
}

效果：