Flutter动画菜单按钮插件animated_menu_button的使用

Flutter 动画菜单按钮插件 animated_menu_button 的使用

简介

本插件提供了可以进一步提升 UI 体验的动画按钮。

示例

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

# File: example.dart

import 'package:flutter/material.dart';
import 'package:rotate_pills_animation/components/animated_,menu_button.dart'; // 假设这是正确的导入路径

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const Expanded(
            child: Center(
              child: Text("Hello world"),
            ),
          ),
          SizedBox(
            height: 100,
            child: Row(
              children: [
                const SizedBox(
                  width: 60,
                  child: Icon(Icons.ac_unit),
                ),
                const SizedBox(
                  width: 60,
                  child: Icon(Icons.ac_unit),
                ),
                Expanded(
                    child: Center(
                  child: AnimatedMenuButton(
                    radius: 50, // 设置按钮的半径
                    homeWidget: item(
                      color: Colors.black, // 设置主按钮的颜色
                      child: const Icon(
                        Icons.add, // 主按钮图标
                        color: Colors.white,
                      ),
                    ),
                    actionWidgets: [
                      InkWell(
                        onTap: () {
                          print("add"); // 打印 "add"，表示点击了添加操作
                        },
                        child: item(
                          color: Colors.green, // 设置第一个操作按钮的颜色
                          child: const Icon(Icons.face), // 第一个操作按钮图标
                        ),
                      ),
                      InkWell(
                        onTap: () {
                          print("image"); // 打印 "image"，表示点击了图像操作
                        },
                        child: item(
                          color: Colors.blue, // 设置第二个操作按钮的颜色
                          child: const Icon(Icons.image), // 第二个操作按钮图标
                        ),
                      ),
                      InkWell(
                        onTap: () {
                          print("cached_rounded"); // 打印 "cached_rounded"，表示点击了缓存操作
                        },
                        child: item(
                          color: Colors.red, // 设置第三个操作按钮的颜色
                          child: const Icon(Icons.cached_rounded), // 第三个操作按钮图标
                        ),
                      )
                    ],
                    animatedDuration: const Duration(milliseconds: 1000), // 设置动画持续时间
                  ),
                )),
                const SizedBox(
                  width: 60,
                  child: Icon(Icons.ac_unit),
                ),
                const SizedBox(
                  width: 60,
                  child: Icon(Icons.ac_unit),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget item({required Widget child, required Color color}) {
    return Container(
      padding: const EdgeInsets.all(5),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: color,
      ),
      child: child,
    );
  }
}

使用说明

1. 安装插件： 在 pubspec.yaml 文件中添加依赖项：

   dependencies:
     rotate_pills_animation: ^版本号
   

2. 导入组件： 在你的 Dart 文件中导入组件：

   import 'package:rotate_pills_animation/components/animated_,menu_button.dart';