Flutter侧边菜单插件flutter_side_menu的使用

Flutter Side Menu 是一个高度可定制的侧边菜单插件，适用于导航、过滤等功能。本文将介绍如何在Flutter项目中使用 flutter_side_menu 插件。

添加依赖

首先，在你的 pubspec.yaml 文件中添加 flutter_side_menu 依赖：

dependencies:
  flutter:
    sdk: flutter
  # 添加 flutter_side_menu
  flutter_side_menu: ^{latest version}

请确保替换 {latest version} 为实际的最新版本号。

导入包

在你的 Dart 代码中导入 flutter_side_menu 包：

import 'package:flutter_side_menu/flutter_side_menu.dart';

属性说明

以下是 SideMenu 组件的一些常用属性：

示例代码

以下是一个完整的示例，展示如何在应用中实现左右两个侧边菜单：

import 'package:flutter/material.dart';
import 'package:flutter_side_menu/flutter_side_menu.dart';

void main() => runApp(
      MaterialApp(
        home: Material(
          child: Scaffold(
            body: Row(
              children: [
                // 左侧菜单
                SideMenu(
                  builder: (data) => SideMenuData(
                    header: const Text('Header'),
                    items: [
                      SideMenuItemDataTile(
                        isSelected: true,
                        onTap: () {},
                        title: 'Item 1',
                        icon: const Icon(Icons.home),
                      ),
                    ],
                    footer: const Text('Footer'),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.white,
                    child: const Center(
                      child: Text(
                        'body',
                      ),
                    ),
                  ),
                ),
                // 右侧菜单
                SideMenu(
                  position: SideMenuPosition.right,
                  builder: (data) => const SideMenuData(
                    customChild: Text('Custom view'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );

更复杂的示例

下面是一个更复杂的示例，展示了如何使用控制器和更多的自定义选项：

import 'package:flutter/material.dart';
import 'package:flutter_side_menu/flutter_side_menu.dart';
import 'package:badges/badges.dart' as badges;

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _controller = SideMenuController();
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            // 左侧菜单
            SideMenu(
              controller: _controller,
              backgroundColor: Colors.blueGrey,
              mode: SideMenuMode.open,
              builder: (data) {
                return SideMenuData(
                  defaultTileData: SideMenuItemTileDefaults(
                    hoverColor: Colors.black,
                  ),
                  animItems: SideMenuItemsAnimationData(),
                  header: const Text('Header'),
                  items: [
                    const SideMenuItemDataTitle(title: 'Section Header'),
                    SideMenuItemDataTile(
                      isSelected: _currentIndex == 0,
                      onTap: () => setState(() => _currentIndex = 0),
                      title: 'Item 1',
                      hoverColor: Colors.blue,
                      titleStyle: const TextStyle(color: Colors.white),
                      icon: const Icon(Icons.home_outlined),
                      selectedIcon: const Icon(Icons.home),
                      tooltipBuilder: (tile) => Tooltip(
                        message: "Tooltip message",
                        child: tile,
                      ),
                      badgeBuilder: (tile) => badges.Badge(
                        badgeContent: const Center(
                          child: Text(
                            '23',
                            style: TextStyle(
                              fontSize: 8,
                              color: Colors.white,
                            ),
                          ),
                        ),
                        position: badges.BadgePosition.custom(
                          end: 12.0,
                          bottom: 0.0,
                          top: 0.0,
                        ),
                        child: tile,
                      ),
                    ),
                    SideMenuItemDataTile(
                      isSelected: _currentIndex == 1,
                      onTap: () => setState(() => _currentIndex = 1),
                      title: 'Item 2',
                      selectedTitleStyle: const TextStyle(
                          fontWeight: FontWeight.w700, color: Colors.yellow),
                      icon: const Icon(Icons.table_bar_outlined),
                      selectedIcon: const Icon(Icons.table_bar),
                      titleStyle: const TextStyle(color: Colors.deepPurpleAccent),
                    ),
                    const SideMenuItemDataTitle(
                      title: 'Account',
                      textAlign: TextAlign.center,
                    ),
                    SideMenuItemDataTile(
                      isSelected: _currentIndex == 2,
                      onTap: () => setState(() => _currentIndex = 2),
                      title: 'Item 3',
                      icon: const Icon(Icons.play_arrow),
                    ),
                    SideMenuItemDataTile(
                      isSelected: _currentIndex == 3,
                      onTap: () => setState(() => _currentIndex = 3),
                      title: 'Item 4',
                      icon: const Icon(Icons.car_crash),
                    ),
                  ],
                  footer: const Text('Footer'),
                );
              },
            ),
            Expanded(
              child: Container(
                color: Colors.white,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'body',
                      style: Theme.of(context).textTheme.displaySmall,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        _controller.toggle();
                      },
                      child: const Text('change side menu state'),
                    )
                  ],
                ),
              ),
            ),
            // 右侧菜单
            SideMenu(
              position: SideMenuPosition.right,
              builder: (data) => const SideMenuData(
                customChild: Text('custom view'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(const MyApp());
}

以上代码展示了如何使用 flutter_side_menu 创建一个带有左右侧边栏的应用，并且可以通过点击按钮来控制侧边栏的状态。希望这些信息对你有所帮助！