效果圖

QQ20210928-163812.gif

flutter的抽屜效果是使用Drawer組件實現(xiàn)的

drawer：左邊
endDrawer：右邊

Drawer可以添加頭部屬性：

DrawerHeader：展示頭部基本信息
UserAccountsDrawerHeader：展示用戶頭像例获、姓名稳吮、郵件等信息

child: DrawerHeader(
    child: Center(
      child: Text('header'),
    ),
 ),

child: UserAccountsDrawerHeader(
  accountEmail: new Text('https://www.baidu.com'),
  accountName: new Text('我是一個好人'),
  currentAccountPicture: new CircleAvatar(
      backgroundImage: new AssetImage('images/header.png'),
   ),
)

tabbar底部導(dǎo)航欄：

class TabbarPageState extends State<TabbarPage> {
  @override
  final List<Widget> page_children = [
    HomePage(),
    MePage(),
  ];
  ///頁面
  final List<String> page_title = ['首頁', '我的'];
  ///標題
  int _currentIndex = 0;
  ///當前選中的頁面
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(page_title[_currentIndex]),
        ///導(dǎo)航欄標題
        centerTitle: true, ///導(dǎo)航欄標題居中顯示（IOS默認居中，Android默認靠左）
        leading: _currentIndex == 0 ? Builder( ///自定義抽屜效果按鈕
          builder: (BuildContext context) {
            return IconButton(
                icon: Icon(Icons.menu),
                onPressed: (){
                    Scaffold.of(context).openDrawer();
                }
            );
          },
        ):null,
        actions: _currentIndex == 0 ?  [
          Builder(builder: (context) {
            return IconButton(
                icon: Icon(Icons.settings),
                onPressed: (){
                  Scaffold.of(context).openEndDrawer();
                }
            );
          }),
        ] : null,
      ),
      body: page_children[_currentIndex],
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onChangePage,
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: page_title[_currentIndex],
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: page_title[_currentIndex],
          ),
        ],
      ),
      drawer: _currentIndex == 0 ? LeftDrawerPage() : null,
      endDrawer: _currentIndex == 0 ? RightDrawerPage() : null,
    );
  }

  void onChangePage(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

抽屜效果左邊

class LeftDrawerPageState extends State<LeftDrawerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text('設(shè)置'),
        centerTitle: true,///居中
      ),
      body: ListTile(
        leading: Icon(Icons.person),
        title: new Text('個人'),
        subtitle: new Text('個人詳情'),
      ),
    );
  }
}

抽屜效果右邊

class RightDrawerPageState extends State<RightDrawerPage> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          Container(
            height: 200,
            // child: DrawerHeader(
            //     child: Center(
            //       child: Text('header'),
            //     ),
            // ),
            child: UserAccountsDrawerHeader(
              accountEmail: new Text('https://www.baidu.com'),
              accountName: new Text('我是一個好人'),
              currentAccountPicture: new CircleAvatar(
                backgroundImage: new AssetImage('images/header.png'),
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: new Text('個人'),
            subtitle: new Text('個人詳情'),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: new Text('個人'),
            subtitle: new Text('個人詳情'),
          )
        ],
      ),
    );
  }
}

new AssetImage('images/header.png') 添加本地圖片
Icon(Icons.person) 添加系統(tǒng)中圖標
_currentIndex == 0 ? LeftDrawerPage() : null  此方法是在哪一個頁面添加抽屜效果，否則tabbar所有頁面都將添加。demo中所有的_currentIndex == 0 ? ：判斷都是為了只在一個頁面添加

demo鏈接 代碼分支在master下戈二，默認是main需選擇分支