Flutter浮动操作按钮菜单插件fab_circular_menu_plus的使用

FAB Circular Menu

fab_circular_menu_plus 是一个Flutter包，用于创建一个美观的圆形菜单，通过浮动操作按钮（FAB）实现。它最初受到 Mayur Kshirsagar 的 FAB Microinteraction 设计启发，并由 Mariano Cordova 实现为 Flutter 插件。

安装

只需将 fab_circular_menu_plus 添加到您的 pubspec.yml 文件中：

dependencies:
  fab_circular_menu_plus: ^0.0.1

示例代码

以下是一个完整的示例，展示了如何使用 fab_circular_menu_plus 创建一个带有四个菜单项的浮动操作按钮菜单：

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

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

class MyApp extends StatelessWidget {
  final GlobalKey<FabCircularMenuPlusState> fabKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    final primaryColor = Theme.of(context).primaryColor;

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          color: const Color(0xFF192A56),
          child: Center(
            child: ElevatedButton(
              onPressed: () {
                // The menu can be handled programmatically using a key
                if (fabKey.currentState?.isOpen ?? false) {
                  fabKey.currentState?.close();
                } else {
                  fabKey.currentState?.open();
                }
              },
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.white),
              ),
              child: Text('Toggle menu programmatically',
                  style: TextStyle(color: primaryColor)),
            ),
          ),
        ),
        floatingActionButton: Builder(
          builder: (context) => FabCircularMenuPlus(
            key: fabKey,
            // Cannot be `Alignment.center`
            alignment: Alignment.bottomRight,
            ringColor: Colors.white.withAlpha(25),
            ringDiameter: 500.0,
            ringWidth: 150.0,
            fabSize: 64.0,
            fabElevation: 8.0,
            fabIconBorder: const CircleBorder(),
            // Also can use specific color based on whether
            // the menu is open or not:
            // fabOpenColor: Colors.white
            // fabCloseColor: Colors.white
            // These properties take precedence over fabColor
            fabColor: Colors.white,
            fabOpenIcon: Icon(Icons.menu, color: primaryColor),
            fabCloseIcon: Icon(Icons.close, color: primaryColor),
            fabMargin: const EdgeInsets.all(16.0),
            animationDuration: const Duration(milliseconds: 800),
            animationCurve: Curves.easeInOutCirc,
            onDisplayChange: (isOpen) {
              _showSnackBar(
                  context, "The menu is ${isOpen ? "open" : "closed"}");
            },
            children: <Widget>[
              RawMaterialButton(
                onPressed: () {
                  _showSnackBar(context, "You pressed 1");
                },
                shape: const CircleBorder(),
                padding: const EdgeInsets.all(24.0),
                child: const Icon(Icons.looks_one, color: Colors.white),
              ),
              RawMaterialButton(
                onPressed: () {
                  _showSnackBar(context, "You pressed 2");
                },
                shape: const CircleBorder(),
                padding: const EdgeInsets.all(24.0),
                child: const Icon(Icons.looks_two, color: Colors.white),
              ),
              RawMaterialButton(
                onPressed: () {
                  _showSnackBar(context, "You pressed 3");
                },
                shape: const CircleBorder(),
                padding: const EdgeInsets.all(24.0),
                child: const Icon(Icons.looks_3, color: Colors.white),
              ),
              RawMaterialButton(
                onPressed: () {
                  _showSnackBar(context,
                      "You pressed 4. This one closes the menu on tap");
                  fabKey.currentState?.close();
                },
                shape: const CircleBorder(),
                padding: const EdgeInsets.all(24.0),
                child: const Icon(Icons.looks_4, color: Colors.white),
              )
            ],
          ),
        ),
      ),
    );
  }

  void _showSnackBar(BuildContext context, String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        duration: const Duration(milliseconds: 1000),
      ),
    );
  }
}

自定义属性

您可以使用以下属性来自定义小部件的外观：

程序化处理菜单

可以通过使用 key 来程序化地处理菜单。创建一个 GlobalKey 并将其设置为 FabCircularMenuPlus 的 key 属性，然后使用该键获取当前状态并打开、关闭或检查菜单状态。

final GlobalKey<FabCircularMenuPlusState> fabKey = GlobalKey();

// 在需要的地方调用
if (fabKey.currentState?.isOpen ?? false) {
  fabKey.currentState?.close();
} else {
  fabKey.currentState?.open();
}

贡献

如果您希望为这个项目做出贡献，请随时提交 PR。欢迎任何改进和建议！

希望这些信息能帮助您更好地理解和使用 fab_circular_menu_plus 插件！如果有任何问题或需要进一步的帮助，请随时提问。