Flutter Drawer 側邊欄、以及側邊欄內 容布局

Flutter Drawer 側邊欄

在 Scaffold 組件里面傳入 drawer 參數可以定義左側邊欄，傳入 endDrawer 可以定義右側邊 欄。側邊欄默認是隱藏的，我們可以通過手指滑動顯示側邊欄，也可以通過點擊按鈕顯示側 邊欄。

 

return Scaffold(
    appBar: AppBar(
    title: Text("Flutter App"), ),
    drawer: Drawer(
        child: Text('左側邊欄'),
    ),
    endDrawer: Drawer(
        child: Text('右側側邊欄'), ),
);        

 

Flutter DrawerHeader

 

常見屬性:

屬性	描述
decoration	設置頂部背景顏色
child	配置子元素
padding	內邊距
margin	外邊距

 

Flutter UserAccountsDrawerHeader

 

屬性	描述
decoration	設置頂部背景顏色
accountName	賬戶名稱
accountEmail	賬戶郵箱
currentAccountPicture	用戶頭像
otherAccountsPictures	用來設置當前賬戶其他賬戶頭像
margin

 

Flutter 側邊欄路由跳轉

 

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: (int index){
              setState(() {  //改變狀態
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //選中的顏色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs可以有多個按鈕
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首頁")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分類")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("設置")
            )
          ],
        ),

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

              Row(
                children: <Widget>[
                  Expanded(
                    child: UserAccountsDrawerHeader(
                      accountName:Text("張三"),
                      accountEmail: Text("[e-mail]"),
                      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: Text("用戶中心"),
                onTap: (){
                  Navigator.of(context).pop();  //隱藏側邊欄
                  Navigator.pushNamed(context, '/user');
                },
              ),
              Divider(),
              ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.settings)
                ),
                title: Text("設置中心"),
              ),
                Divider(),
            ],
          ),


        ),
        endDrawer: Drawer(
          child: Text('右側側邊欄'),
        ),
      );
  }
}