Flutter Drawer sidebar, sidebar and content layout

Flutter Drawer sidebar

In Scaffold assembly passed inside drawer parameters may define the left side bar, the incoming endDrawer can define the right sidebar. Sidebar is hidden by default, we can display the sidebar by sliding your finger, you can also display the sidebar by clicking the button.

 

return the Scaffold ( 
    appbar: the AppBar ( 
    title: the Text ( "Flutter the App" ),), 
    Drawer: Drawer ( 
        Child: the Text ( 'left sidebar' ), 
    ), 
    endDrawer: Drawer ( 
        Child: the Text ( 'right sidebar ' ),), 
);        

 

Flutter DrawerHeader

 

Common attributes:

Attributes	description
decoration	Set Top background color
child	Configuration sub-elements
padding	Padding
margin	Margin

 

Flutter UserAccountsDrawerHeader

 

Attributes	description
decoration	Set Top background color
accountName	account name
accountEmail	E-mail Accounts
currentAccountPicture	profile picture
otherAccountsPictures	The current account is used to set other accounts Avatar
margin

 

Flutter sidebar routing Jump

 

onTap: (){ 
    Navigator.of(context).pop();
    Navigator.pushNamed(context, '/search');
 }

 

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

class Tabs extends StatefulWidget {
  final index;
  Tabs({Key key,this.index=0}) : super(key: key);

  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {

  int _currentIndex;
  _TabsState(index){
    this._currentIndex=index;
  }

  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter App"),
        ),
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   //配置对应的索引值选中
          onTap: (intindex) { 
              the setState (() {   // change the state of 
                  the this ._currentIndex = index; 
              }); 
          }, 
          iconSize: 36.0,       // icon size 
          fixedColor: Colors.red,   // selected color   
          type: BottomNavigationBarType.fixed,    / / configuration bottom tabs can have multiple buttons 
          items: [ 
            BottomNavigationBarItem ( 
              icon: icon (Icons.home), 
              title: the Text ( "Home" ) 
            ), 
             BottomNavigationBarItem (  
              icon: icon (Icons.category),
              title: the Text ( "classification" )
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),

        drawer: Drawer(
          child: Column(
            children: <Widget>[

              Row(
                children: <Widget>[
                  Expanded(
                    child: UserAccountsDrawerHeader(
                      accountName:Text("张三"),
                      accountEmail: Text("[email protected]"),
                      currentAccountPicture: CircleAvatar(
                        backgroundImage: NetworkImage("http://pic23.nipic.com/20120830/9686992_180336646144_2.jpg"),                        
                      ),
                      decoration:BoxDecoration(                        
                        image: DecorationImage(
                          image: NetworkImage("http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg"),
                          fit:BoxFit.cover,
                        )
                        
                      ),
                     otherAccountsPictures: <Widget>[
                       Image.network("http://k.zol-img.com.cn/dcbbs/22000/a21999018_01000.jpg"),
                       Image.network("http://pic38.nipic.com/20140211/17882171_143443301183_2.jpg"),
                     ],
                    )
                  )
                ],
              ),
              ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.home)
                ),
                title: Text("我的空间"),
              
              ),
                Divider(),
               ListTile(
                leading: CircleAvatar(
                  Child: Icon (Icons.people) 
                ),
                title: the Text ( "Users" ), 
                onTap in: () { 
                  Navigator.of (context) .pop ();   // hides sidebar 
                  Navigator.pushNamed (context, '/ user' ); 
                }, 
              ), 
              Divider (), 
              ListTile ( 
                leading: CircleAvatar ( 
                  Child: Icon (Icons.settings) 
                ), 
                title: the Text ( "set center" ), 
              ), 
                Divider (), 
            ], 
          ), 


        ),
        endDrawer: Drawer ( 
          Child: the Text ( 'right sidebar' ), 
        ), 
      ); 
  } 
}