Flutter动画菜单插件 animated_radial_menu 的使用

animated_radial_menu 是一个提供简单方式创建径向菜单（Radial Menu）并附带动画效果的Flutter插件。通过这个插件，你可以轻松地在应用中添加带有动画效果的圆形菜单。

功能演示

你可以查看这里的例子获取更多详情。

安装

要在你的项目中使用该插件，请将依赖项添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  animated_radial_menu:

然后运行 flutter packages get 来安装最新的包版本。

基本用法

首先，在你的项目文件中导入包：

import 'package:animated_radial_menu/animated_radial_menu.dart';

接下来，就像使用 Column 或 Row 小部件一样，只需传递按钮作为子元素即可：

RadialMenu(
   children: [
       RadialButton(
         icon: Icon(Icons.ac_unit),
         onPress: () => print("ac unit"),
       )
   ]
),

尽管可以在任何地方使用此小部件，但如果页面包含大量UI元素，则建议与 Stack 小部件一起使用 RadialMenu：

body: Stack(
     children: [
         RadialMenu(
           children: [
             RadialButton(
               icon: Icon(Icons.ac_unit),
               buttonColor: Colors.teal,
               onPress: () => Get.to(TargetScreen())),
             RadialButton(
                 icon: Icon(Icons.camera_alt),
                 buttonColor: Colors.green,
                 onPress: () => Get.to(TargetScreen())),
             RadialButton(
                 icon: Icon(Icons.map),
                 buttonColor: Colors.orange,
                 onPress: () => Get.to(TargetScreen())),

             /* 你可以添加任意数量的按钮，但不建议超过8-9个按钮。 */
           ],
         ),
         
         // 其他小部件...

       ],
   ),

你可以手动调整小部件的位置：

RadialMenu(
 centerButtonAlignment: Alignment(0.3,0.5) // 默认对齐方式为Alignment.center
)

你还可以自定义中心按钮（即将提供更多自定义选项）：

RadialMenu(
      centerButtonSize: 0.5, // 大小范围从0.0到1.0
)

示例 Demo

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

import 'package:animated_radial_menu/animated_radial_menu.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Radial Menu Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Radial Speed Dial"),
          centerTitle: true,
        ),
        body: Stack(
          children: [
            RadialMenu(
              children: [
                RadialButton(
                    icon: Icon(Icons.ac_unit),
                    buttonColor: Colors.teal,
                    onPress: () => print('AC Unit Pressed')),
                RadialButton(
                    icon: Icon(Icons.camera_alt),
                    buttonColor: Colors.green,
                    onPress: () => print('Camera Pressed')),
                RadialButton(
                    icon: Icon(Icons.map),
                    buttonColor: Colors.orange,
                    onPress: () => print('Map Pressed')),
                RadialButton(
                    icon: Icon(Icons.access_alarm),
                    buttonColor: Colors.indigo,
                    onPress: () => print('Alarm Pressed')),
                RadialButton(
                    icon: Icon(Icons.watch),
                    buttonColor: Colors.pink,
                    onPress: () => print('Watch Pressed')),
                RadialButton(
                    icon: Icon(Icons.settings),
                    buttonColor: Colors.blue,
                    onPress: () => print('Settings Pressed')),
                RadialButton(
                    icon: Icon(Icons.mail_outline),
                    buttonColor: Colors.yellow,
                    onPress: () => print('Mail Pressed')),
                RadialButton(
                    icon: Icon(Icons.logout),
                    buttonColor: Colors.red,
                    onPress: () => print('Logout Pressed')),
              ],
            ),
            Positioned(
              top: 30,
              left: 10,
              child: ElevatedButton(
                  onPressed: () {
                    if (Get.isDarkMode) {
                      Get.changeTheme(ThemeData.light());
                    } else {
                      Get.changeTheme(ThemeData.dark());
                    }
                  },
                  child: Text("Change Theme")),
            )
          ],
        ),
      ),
    );
  }
}