Scaffold属性 抽屉菜单Drawer

在Scaffold组件里面传入drawer参数可以定义左侧边栏，传入endDrawer可以定义右侧边栏。侧边栏默 认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。

import 'package:flutter/material.dart';

return Scaffold(
  appBar: AppBar(
    title: Text('Flutter Demo'),
  ),
  body: Center(
    child: Text('Hello World'),
  ),
  drawer: Drawer(
    child: DrawerHeader(
      child: Text('我是一个侧边栏'),
    ),
  ),
    endDrawer: Drawer(
        child: DrawerHeader(
        child: Text('我是一个右侧边栏'),
        ),
    ),
);

Flutter DrawerHeader组件

常见属性：

Flutter UserAccountsDrawerHeader

常见属性：

import 'package:flutter/material.dart';
import 'package:flutter_application_1/user.dart';

import 'home.dart';
import 'category.dart';
import 'setting.dart';
import 'message.dart';

class TabsPage extends StatefulWidget {
  const TabsPage({super.key});

  @override
  State<TabsPage> createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
  int _currentIndex = 0;
  final List _pageList = [
    const HomePage(),
    const CategoryPage(),
    const MessagePage(),
    const SettingPage(),
    const UserPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter App'),
      ),
      drawer: Drawer(
        child: Column(
          children: const [
            UserAccountsDrawerHeader(
              accountName: Text('张三'),
              accountEmail: Text('123456'),
              currentAccountPicture: CircleAvatar(
                backgroundImage: NetworkImage('https://www.itying.com/images/flutter/3.png'),
              ),
              otherAccountsPictures: [
                CircleAvatar(
                  backgroundImage: NetworkImage('https://www.itying.com/images/flutter/4.png'),
                ),
                CircleAvatar(
                  backgroundImage: NetworkImage('https://www.itying.com/images/flutter/5.png'),
                ),
              ],
              decoration: BoxDecoration(
                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(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text('设置中心'),
            ),
            Divider(),
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Column(
          children: const [
            UserAccountsDrawerHeader(
              accountName: Text('张三'),
              accountEmail: Text('123456'),
              currentAccountPicture: CircleAvatar(
                backgroundImage: NetworkImage('https://www.itying.com/images/flutter/3.png'),
              ),
              otherAccountsPictures: [
                CircleAvatar(
                  backgroundImage: NetworkImage('https://www.itying.com/images/flutter/4.png'),
                ),
                CircleAvatar(
                  backgroundImage: NetworkImage('https://www.itying.com/images/flutter/5.png'),
                ),
              ],
              decoration: BoxDecoration(
                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(),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text('设置中心'),
            ),
            Divider(),
          ],
        ),

      ),

      body: _pageList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed, // 如果有4个以上的按钮，必须设置type 
        fixedColor: Colors.red, // 选中的颜色
        //iconSize: 35, // 图标大小
        onTap: (int index){
          print(index);
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: '分类',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: '消息',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          ),
          // 我的
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
      ),
      floatingActionButton: Container(
        width: 60,
        height: 60,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          color: Colors.white,
        ),
        margin: const EdgeInsets.only(top: 4),
        padding: const EdgeInsets.all(4),
        child: FloatingActionButton(
          onPressed: (){
            setState(() {
              _currentIndex = 2;
            });
          },
          backgroundColor: _currentIndex == 2 ? Colors.red :Colors.blue,
          child: const Icon(Icons.add),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

}