14. Flutter learning path Drawer sidebar and sidebar content layout

Drawer

parameter	describe
child	Subassembly
elevation
semanticLabel

DrawerHeader

parameter	describe
decoration	set top background color
child	configuration child element
padding	Padding
margin	Margin

which is used as

class Tabs extends StatefulWidget{
  final index;

  Tabs({this.index=0});

  @override
  State<StatefulWidget> createState() {
    return _TabsState(index);
  }

}

class _TabsState extends State<Tabs>{
  List<Widget> _page=[HomePage(),SettignPage(),MinePage()]; //用于存放对应的页面
  int _bottomIndex=0;

  _TabsState(index){
   _bottomIndex=index;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body:this._page[_bottomIndex],
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 25,

        type: BottomNavigationBarType.fixed,  //配置底部tabs可以有多个按钮
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
         
        ],
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: DrawerHeader( //侧边栏的头部
                      child: Text('你好Flutter'),
                      decoration: BoxDecoration(
//                        color: Colors.red
                        image: DecorationImage(
                          image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
                          fit: BoxFit.cover
                        )
                      ),
                    ),
                  )
                ],
              ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text('空间'),
            ),
            Divider(),//一条线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
              title: Text('用户中心'),
            ),
            Divider(),//一条线
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Column(
          children: <Widget>[

            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text('设置中心'),
              onTap: (){		//实现点击进行侧边栏的item进行关闭侧边栏
                Navigator.pop(context);
              },
            ),
            Divider(),//一条线
          ],
        )
      ),
    );
  }
}

UserAccountsDrawerHeader

heanderThis is a common user component provided by Flutter

Attributes	describe
decoration	set top background color
accountName	account name
accountEmail	Account email
currentaccountPicture	profile picture
otherAccountsPicture	It is used to set the avatar of other accounts of the current account
margin	Margin