Flutter drawer side sliding bar implementation

The side slide bar is often used for most apps. Next, let's realize the side slide bar effect of flutter step by step.
Here you need to use the Drawer and DrawerHeader controls provided by flutter . DrawerHeader is usually used as the head control of the side slide bar, such as user avatar.

Drawer construction method and common attributes introduction

const Drawer({
    Key key,
    this.elevation = 16.0,
    this.child,
    this.semanticLabel,
  })

The commonly used attribute of this control is the child attribute, and child is the specific sub-item displayed in the drawer.

attribute name	attribute value type	illustrate
child	Widget type	All sub-items to be displayed are commonly implemented with ListView

DrawerHeader construction method and common attributes introduction

const DrawerHeader({
    Key key,
    this.decoration,
    @required this.child,
  })

attribute name	attribute value type	illustrate
decoration	Decoration type	Decorate background color, etc., commonly used BoxDecoration to achieve
child	Widget type	The sub-items to be displayed, CircleAvatar is commonly used to implement user avatars

Simple implementation of drawer

The drawer side sliding bar is usually implemented through the drawer attribute under the Scaffold control, and the following code is used to implement it.

drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader( // drawer的头部控件
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: UnconstrainedBox( // 解除父级的大小限制
                child: CircleAvatar(
                  radius: 40,
                  backgroundColor: Colors.transparent,
                  backgroundImage: NetworkImage(
                    'https://i.loli.net/2020/01/21/4t5hLOoF3YeKSHT.png',
                  ),
                ),
              ),
            ),
            ListTile( // 子项
              leading: Icon(Icons.settings),
              title: Text("设置"),
              onTap: _popDrawer,
            ),
            ListTile( // 子项
              leading: Icon(Icons.person),
              title: Text("个人"),
              onTap: _popDrawer,
            ),
            ListTile( // 子项
              leading: Icon(Icons.feedback),
              title: Text("反馈"),
              onTap: _popDrawer,
            ),
          ],
        ),
      ),

Among them, _popDrawer is the method to close the side sliding bar. The effect diagram of the above implementation is as follows:

get _popDrawer => () => Navigator.pop(context);

1.PNG

drawer optimization

• 
  At this time, there is a gray bar on the top of our drawer, the height of which is the height of the status bar, which is very ugly. We only need to specify a padding value of 0 in the control ListView corresponding to the child property of the Drawer. The renderings are as follows:

drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero, // 此处能解决顶部为灰色的问题
          children: <Widget>[
            ...
          ],
        ),
      ),

2.PNG

• If we want to disable sliding out of the sidebar and only click on the upper left corner to pop up the sidebar, we only need to add one attribute.

drawerEdgeDragWidth: 0.0, // 禁止通过滑动打开drawer