[] Entry Flutter 05-drawer drawers

basis

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false, //去掉右上角的debug 图标
        theme: ThemeData(
            primaryColor: Colors.redAccent,
            highlightColor: Colors.red, //点击下去时的颜色
            splashColor: Colors.white30 //点击时候水波纹的颜色
            ),
        home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gecer'),
        centerTitle: true,
        elevation: 0, //阴影大小
      ),
      body: null,
      drawer: Container(
        color: Colors.white,
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[Text('left')],
        ),
      ),
      endDrawer: Container(
        color: Colors.white,
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[Text('right')],
        ),
      ),
    );
  }
}

1. Scaffold can be specified in the drawer, the drawer left represents drawer, endDrawer right represents a drawer.
2. If no leading (corresponding to the drawer) is defined (corresponding to endDrawer) appBar and actions, menu icons will appear automatically when you create a drawer, the drawer click on the icon to start if you have a custom icon is not defined icon again, you need to write another code is Off open the drawer.

Drawer closing code control

Navigator.pop(context);

Beautification of drawers

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false, //去掉右上角的debug 图标
        theme: ThemeData(
            primaryColor: Colors.redAccent,
            highlightColor: Colors.red, //点击下去时的颜色
            splashColor: Colors.white30 //点击时候水波纹的颜色
            ),
        home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gecer'),
        centerTitle: true,
        elevation: 0, //阴影大小
      ),
      body: null,
      drawer: Drawer(
        child: ListView(
          //去上边栏灰色条
          padding: EdgeInsets.all(0),
          children: <Widget>[
            //固定格式的用户信息介绍
            UserAccountsDrawerHeader(
              accountEmail: Text('[email protected]'),
              accountName: Text('Gecer'),
              //头像
              currentAccountPicture: CircleAvatar(
                backgroundImage: NetworkImage(
                    'https://profile.csdnimg.cn/E/A/C/1_weixin_39370093'),
              ),
              //美化控件
              decoration: BoxDecoration(
                  //背景图片
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580361663095&di=bf5bcc19ed8fbc4585ada1e7c52efb4f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F05%2F20180205184357_irwly.thumb.700_0.jpg'))),
            ),
            //列表项
            ListTile(
              title: Text('2020',textAlign: TextAlign.center  ),
              //右边图标
              trailing: Icon(
                Icons.grade,
                color: Colors.red,
              ),
              //左边图标
              leading: Icon(
                Icons.favorite,
                color: Colors.red,
              ),
            ),
            ListTile(
              title: Text('国泰民安',textAlign: TextAlign.center,),
              trailing: Icon(Icons.grade, color: Colors.orange),
              leading: Icon(
                Icons.favorite,
                color: Colors.orange,
              ),
            ),
            Divider(
              color: Colors.amberAccent,
            ),
            ListTile(
              title: Text(
                '祝大家新年快乐，阖家幸福',
                style: TextStyle(color: Colors.orange),
              ),
              trailing: Icon(Icons.grade, color: Colors.orange),
            ),
          ],
        ),
      ),
    );
  }
}