Flutter开发（十四）—— Drawer边栏抽屉(Android原生DrawerLayout)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/RedKeyer/article/details/89841503

演示代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.deepPurple, //主题背景颜色
        highlightColor: Colors.purple, //按下按钮时 高亮颜色
        splashColor: Colors.white30,
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white70, //页面背景颜色
        appBar: AppBar(
          // leading在左侧
          // 注意：如果使用Drawer，不要自己去写leading，系统会默认有leading，并且能关联打开Drawer动作
          // leading: IconButton(
          //   icon: Icon(Icons.menu),
          //   tooltip: 'Menu show',
          //   onPressed: () => debugPrint('点击了 Menu！'),
          // ),

          // title 中间
          title: Text('RedKey',
              style: TextStyle(
                color: Colors.redAccent,
              )),

          //  actions 在右边，可以添加多个图标
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search), //图标
              tooltip: 'Search show', //注释
              onPressed: () => debugPrint('点击了 Search!'), //点击事件
            ),
            IconButton(
              icon: Icon(Icons.more_vert),
              tooltip: 'More show',
              onPressed: () => debugPrint('点击了 more_vert!'),
            ),
          ],
        ),
        // drawer 左边显示抽屉控件，endDrawer  右边显示抽屉控件
        drawer: DrawerWidget(),
        endDrawer: DrawerWidget());
  }
}

// Drawer 控件内容
class DrawerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text(
              'RedKeyset',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            accountEmail: Text('[email protected]'),
            //定义用户头像，CircleAvatar 指定成圆形
            currentAccountPicture: CircleAvatar(
              backgroundImage: NetworkImage('https://dwz.cn/YfHol40M'),
            ),
            decoration: BoxDecoration(
                color: Colors.deepOrangeAccent, //区域背景颜色
                image: DecorationImage(
                    image: NetworkImage('https://dwz.cn/N00Lpoj0'),
                    fit: BoxFit.cover,
                    // ColorFilter 颜色滤镜  BlendMode混合模式
                    colorFilter: ColorFilter.mode(
                        Colors.blue[300]
                            .withOpacity(0.2), // blueAccent 这一类的颜色会报错
                        BlendMode.srcOver))),
          ),
          ListTile(
              leading: Icon(Icons.access_alarm,
                  color: Colors.blueAccent, size: 18.0), //指定Icon的颜色  和 大小
              title:
                  Text('新闻', textAlign: TextAlign.left), //TextAlign.left 文字左对齐
              onTap: () => Navigator.pop(context)),
          ListTile(
              title: Text('消息', textAlign: TextAlign.center),
              onTap: () => Navigator.pop(context)),
          ListTile(
              title: Text('关于我们',
                  textAlign: TextAlign.right), //TextAlign.right 文字右对齐
              trailing: Icon(Icons.account_balance,
                  color: Colors.orangeAccent, size: 28.0),
              onTap: () => Navigator.pop(context))
        ],
      ),
    );
  }
}

演示效果：
drawer 左侧抽屉，endDrawer右侧抽屉，都可以滑动展示。