Flutter圆形UI导航插件circle_ui_navigator的使用

circle_ui_navigator 是一个Flutter插件，用于以华丽、动画的方式显示圆形导航小部件。它具有高度可定制性，并且灵感来源于Johny Vino的设计。

插件信息

• Pub Package
• 设计来源

版本要求

• Dart SDK版本 >= 3.0.0 < 4.0.0
• 只支持SVG格式图标资产

使用效果展示

打开状态	关闭状态

安装方法

在命令行中运行以下命令安装此插件：

flutter pub add circle_ui_navigator

使用示例

示例代码

以下是circle_ui_navigator的基本用法示例：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Circle UI Navigator Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Circle UI Navigator Example'),
        ),
        body: const HomePage(),
      ),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isOpeningAnimation = true;
  bool _isClosingAnimation = false;

  @override
  Widget build(BuildContext context) {
    double pageWidth = MediaQuery.of(context).size.width;
    double pageHeight = MediaQuery.of(context).size.height;

    return CircleNavigatorConfig(
      center: Point(pageWidth / 2, pageHeight / 2),
      animatedRippleColor: const Color(0xFF66A0FE).withOpacity(0.7),
      filledCircleColor: const Color(0xFFB4D8FF).withOpacity(0.7),
      isOpeningAnimation: _isOpeningAnimation,
      onOpenAnimationComplete: () {
        setState(() {
          _isOpeningAnimation = false;
        });
      },
      isClosingAnimation: _isClosingAnimation,
      onCloseAnimationComplete: () {
        setState(() {
          _isClosingAnimation = false;
        });

        if (Navigator.canPop(context)) {
          Navigator.pop(context);
        } else {
          SystemNavigator.pop();
        }
      },
      iconSize: 48.0,
      actionIcons: [
        TappableIconData(
          assetPath: 'assets/images/local_florist.svg',
          color: Colors.green,
          tappedColor: Colors.grey,
          onTap: () {
            // 根据需要添加导航逻辑
          },
          outerBorderColor: Colors.white,
          outerBorderSize: 10,
          innerBorderColor: Colors.white,
        ),
        // 其他TappableIconData...
      ],
      closeIcon: TappableIconData(
        color: const Color(0xFF3678D0),
        assetPath: 'assets/images/close.svg',
        tappedColor: const Color(0xFF3678D0).withOpacity(0.5),
        onTap: () {
          setState(() {
            _isClosingAnimation = true;
          });
        },
        outerBorderColor: Colors.white54,
        outerBorderSize: 12,
        innerBorderColor: Colors.white,
      ),
      child: const CircleNavigator(),
    );
  }
}

注意事项

• center参数需要根据屏幕尺寸动态调整，确保导航菜单位于屏幕中央。
• 确保所有图标文件路径正确无误。
• 如果你希望关闭动画，请告知开发者以便改进包。

额外信息

如果你有任何问题或建议，请访问GitHub Issues页面提交反馈。