Flutter动画菜单插件animated_menu的使用

pub package

AnimatedMenu 插件可以帮助你创建带有或不带动画效果的菜单。你可以使用 FadeIn 或 SlideIn 动画来显示菜单，并且可以在 AnimatedMenu 中使用任何小部件作为菜单项（animated_menu 插件内置了 animate_do 包，提供了多种默认动画）。

Screenshot

安装

在你的项目的 pubspec.yaml 文件中添加 animated_menu 依赖：

dependencies:
  animated_menu: ^1.0.2

使用

在你的 Dart 文件中导入 animated_menu：

import 'package:animated_menu/animated_menu.dart';

然后在你的函数中使用 showAnimatedMenu：

onTapDown: (details) {
  showAnimatedMenu(
    context: context,
    preferredAnchorPoint: Offset(
      details.globalPosition.dx,
      details.globalPosition.dy,
    ),
    isDismissable: true,
    useRootNavigator: true,
    menu: AnimatedMenu(
      items: [
        FadeIn(
          child: Material(
            borderRadius: BorderRadius.circular(10),
            child: Container(
              height: 170,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Column(
                children: const [
                  SizedBox(height: 10),
                  Text('Item 1'),
                  Divider(),
                  Text('Item 2'),
                  Divider(),
                  Text('Item 3'),
                  Divider(),
                  Text('Item 4'),
                  Divider(),
                  Text('Item 5'),
                  SizedBox(height: 10),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  );
},

菜单动画

要为菜单项添加动画效果，可以将菜单项包装在 animate_do 包中的任何动画小部件中。

例如：

FadeIn(
  child: Material(
    borderRadius: BorderRadius.circular(10),
    child: Container(
      height: 170,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        children: const [
          SizedBox(height: 10),
          Text('Item 1'),
          Divider(),
          Text('Item 2'),
          Divider(),
          Text('Item 3'),
          Divider(),
          Text('Item 4'),
          Divider(),
          Text('Item 5'),
          SizedBox(height: 10),
        ],
      ),
    ),
  ),
),

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 AnimatedMenu 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: ListView(
        children: [
          Column(
            children: [
              GestureDetector(
                onTapDown: (details) {
                  showAnimatedMenu(
                    context: context,
                    preferredAnchorPoint: Offset(
                      details.globalPosition.dx,
                      details.globalPosition.dy,
                    ),
                    isDismissable: true,
                    useRootNavigator: true,
                    menu: AnimatedMenu(
                      items: [
                        const AnimatedMenuButtonItem(
                          child: Text('Item 1'),
                        ),
                        Material(
                          borderRadius: BorderRadius.circular(10),
                          child: Container(
                            height: 170,
                            width: 200,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10),
                            ),
                            child: Column(
                              children: const [
                                SizedBox(height: 10),
                                Text('Item 1'),
                                Divider(),
                                Text('Item 2'),
                                Divider(),
                                Text('Item 3'),
                                Divider(),
                                Text('Item 4'),
                                Divider(),
                                Text('Item 5'),
                                SizedBox(height: 10),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                },
                child: Container(
                  height: MediaQuery.of(context).size.height,
                  width: MediaQuery.of(context).size.width,
                  color: Colors.black,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

致谢

animate_do

希望这个示例能帮助你更好地理解和使用 animated_menu 插件！如果有任何问题或建议，请随时提出。

更多关于Flutter动画菜单插件animated_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•1 天前

更多关于Flutter动画菜单插件animated_menu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何使用Flutter中的animated_menu插件来实现动画菜单的示例代码。这个插件可以帮助你创建具有动画效果的菜单项。

首先，确保你已经在pubspec.yaml文件中添加了animated_menu依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_menu: ^最新版本号  # 请确保使用最新版本

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下方式使用animated_menu插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Menu Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimatedMenuExample(),
    );
  }
}

class AnimatedMenuExample extends StatefulWidget {
  @override
  _AnimatedMenuExampleState createState() => _AnimatedMenuExampleState();
}

class _AnimatedMenuExampleState extends State<AnimatedMenuExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  late bool isOpen = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    )..addListener(() {
      setState(() {});
    });

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void toggleMenu() {
    setState(() {
      isOpen = !isOpen;
      if (isOpen) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Menu Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedMenu(
              menuItems: [
                MenuItem(
                  icon: Icons.home,
                  label: 'Home',
                  onPressed: () {
                    // Handle home press
                    print('Home Pressed');
                  },
                ),
                MenuItem(
                  icon: Icons.star,
                  label: 'Favorites',
                  onPressed: () {
                    // Handle favorites press
                    print('Favorites Pressed');
                  },
                ),
                MenuItem(
                  icon: Icons.settings,
                  label: 'Settings',
                  onPressed: () {
                    // Handle settings press
                    print('Settings Pressed');
                  },
                ),
              ],
              isOpen: isOpen,
              animation: _animation,
              menuButton: IconButton(
                icon: Icon(
                  isOpen ? Icons.close : Icons.menu,
                  color: Colors.blue,
                ),
                onPressed: toggleMenu,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

依赖导入：确保在pubspec.yaml中添加了animated_menu依赖。
创建应用：使用MaterialApp创建一个基本的Flutter应用。
动画控制器：在_AnimatedMenuExampleState中，使用AnimationController来控制菜单的打开和关闭动画。
菜单切换：toggleMenu方法用于切换菜单的打开和关闭状态，并相应地启动或反转动画。
构建UI：使用AnimatedMenu小部件来创建带有动画效果的菜单。menuItems属性包含菜单项，isOpen属性控制菜单的打开和关闭状态，animation属性控制动画，menuButton属性用于显示和隐藏菜单。

这个示例代码展示了如何使用animated_menu插件创建一个简单的动画菜单。你可以根据需要自定义菜单项的图标、标签和点击事件。