Flutter手势菜单插件gestu_menu的使用

Flutter手势菜单插件gestu_menu的使用

Gestu Menu 是一个提供可自定义和动画效果的手势菜单插件，包含主菜单项和子菜单项。

特性

• 支持主菜单项和子菜单项。
• 支持前缀和后缀图标。
• 可以自定义选中项的颜色。
• 展开和收缩有动画效果。

安装

在 pubspec.yaml 文件中添加 gestu_menu 依赖：

dependencies:
  gestu_menu: ^0.0.2

然后运行 flutter pub get 来安装该包。

使用

以下是一个完整的示例代码，展示了如何使用 gestu_menu 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gestu Menu',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Demo Menu Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const SizedBox(height: 8),
          GestuMenuPrimaryItem<String>(
            title: 'Main Option',
            prefixIconData: Icons.space_dashboard_outlined,
            expandedIndicatorRight: true,
            onTap: (value) {
              debugPrint('action button: $value');
            },
            items: const [
              GestuMenuSecondaryItemWidget(
                prefixIconData: Icons.bubble_chart,
                title: 'Menu Item Selected',
                counter: 1,
                isSelected: true,
                index: 'hola',
                // onTap: (value) {},
              ),
              GestuMenuSecondaryItemWidget(
                prefixIconData: Icons.bar_chart_outlined,
                title: 'Menu Item',
                counter: 2,
                index: 'Adios',
                // onTap: (value) {},
              ),
            ],
          ),
          const SizedBox(height: 8),
          Expanded(
            child: ListView(
              children: [
                GestuMenuPrimaryItem(
                  title: 'First Option',
                  prefixIconData: Icons.dashboard,
                  expandedIndicatorRight: true,
                  items: [
                    GestuMenuSecondaryItemWidget(
                      prefixIconData: Icons.bubble_chart,
                      title: 'Menu Item Selected',
                      counter: 1,
                      isSelected: true,
                      index: 1,
                      onTap: (value) {},
                    ),
                    GestuMenuSecondaryItemWidget(
                      prefixIconData: Icons.bar_chart_outlined,
                      title: 'Menu Item',
                      counter: 2,
                      index: 2,
                      onTap: (value) {},
                    ),
                  ],
                ),
                GestuMenuPrimaryItem(
                  title: 'Second Option',
                  prefixIconData: Icons.security_outlined,
                  expandedIndicatorRight: true,
                  items: [
                    GestuMenuSecondaryItemWidget(
                      prefixIconData: Icons.developer_board,
                      title: 'Menu Item',
                      suffixIconData: Icons.check_box,
                      index: 1,
                      onTap: (value) {},
                    ),
                    GestuMenuSecondaryItemWidget(
                      prefixIconData: Icons.developer_mode,
                      title: 'Menu Item',
                      suffixIconData: Icons.check_box_outline_blank,
                      index: 2,
                      onTap: (value) {},
                    ),
                  ],
                ),
                GestuMenuSecondaryItemWidget(
                  isPrimary: true,
                  prefixIconData: Icons.verified_user,
                  title: 'Third Option',
                  index: 2,
                  onTap: (value) {},
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}