Flutter圆形旋转动画插件circular_rotation的使用

circular_rotation 是一个用于在Flutter中创建自定义圆形旋转动画的插件。它允许您将小部件以圆形方式排列，并支持类似于太阳系的运动效果。以下是该插件的基本用法和示例代码。

插件信息

• Pub.dev
• GitHub Stars

支持平台

• Android
• iOS
• Linux
• Mac
• Web
• Windows

许可证

• MIT License

使用方法

示例代码

以下是一个完整的示例，展示如何使用 circular_rotation 插件创建一个圆形旋转动画：

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

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<Widget> _firstCircleImages = [];
  final List<Widget> _secondCircleImages = [];
  final List<Widget> _thirdCircleImages = [];

  @override
  void initState() {
    generateImages();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fill,
            image: AssetImage('assets/galaxy.jpg'), // 替换为实际背景图片路径
          ),
        ),
        child: CircularRotation(
          circularRotationProperty: CircularRotationModel(
            firstCircleFill: true,
            secondCircleFill: true,
            thirdCircleFill: true,
            firstCircleFillColor: Colors.red,
            secondCircleFillColor: Colors.blue,
            thirdCircleFillColor: Colors.purple,
            defaultCircleStrokeWidth: 0.2,
            defaultCircleStrokeColor: Colors.white,
            startAnimation: true,
            repeatAnimation: false,
            firstCircleAnimationDuration: 5000,
            secondCircleAnimationDuration: 7000,
            thirdCircleAnimationDuration: 10000,
            centerWidget: const InkWell(
              onTap: CircularRotation.eitherStartOrStopAnimation,
              child: _GetProfile(
                name: 'Tom',
                image: 'assets/center.png', // 替换为实际中心图片路径
                radius: 48.0,
              ),
            ),
            firstCircleWidgets: _firstCircleImages,
            secondCircleWidgets: _secondCircleImages,
            thirdCircleWidgets: _thirdCircleImages,
          ),
        ),
      ),
    );
  }

  void generateImages() {
    var listOfNames = ['Dad', 'Uncle P', 'Cindy', 'Sally', 'Sammy', 'Bob', 'Aria'];

    /// Adding images into first circle.
    _firstCircleImages.add(_GetProfile(name: listOfNames[4], image: 'assets/planet_5.png')); // 替换为实际图片路径
    _firstCircleImages.add(_GetProfile(name: listOfNames[3], image: 'assets/planet_4.png'));
    _firstCircleImages.add(_GetProfile(name: listOfNames[6], image: 'assets/planet_7.png'));

    /// Adding images into second circle.
    _secondCircleImages.add(_GetProfile(name: listOfNames[1], image: 'assets/planet_2.png'));
    _secondCircleImages.add(_GetProfile(name: listOfNames[2], image: 'assets/planet_3.png'));
    _secondCircleImages.add(_GetProfile(name: listOfNames[5], image: 'assets/planet_6.png'));

    /// Adding images into third circle.
    _thirdCircleImages.add(_GetProfile(name: listOfNames[0], image: 'assets/planet_1.png'));
  }
}

class _GetProfile extends StatelessWidget {
  const _GetProfile({
    required this.name,
    required this.image,
    this.radius = 32.0,
    Key? key,
  }) : super(key: key);
  final String name;
  final String image;
  final double radius;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _CircularImage(image: image, radius: radius),
        Text(
          name,
          style: const TextStyle(
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}

class _CircularImage extends StatelessWidget {
  const _CircularImage({required this.image, required this.radius, Key? key}) : super(key: key);
  final String image;
  final double radius;

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      radius: radius,
      backgroundImage: AssetImage(image),
      backgroundColor: Colors.transparent,
    );
  }
}

参数说明

• firstCircleFill: 控制第一个圆是否填充。
• secondCircleFill: 控制第二个圆是否填充。
• thirdCircleFill: 控制第三个圆是否填充。
• firstCircleFillColor: 第一个圆的填充颜色。
• secondCircleFillColor: 第二个圆的填充颜色。
• thirdCircleFillColor: 第三个圆的填充颜色。
• defaultCircleStrokeWidth: 所有圆的边框宽度。
• defaultCircleStrokeColor: 所有圆的边框颜色。
• startAnimation: 是否开始动画。
• repeatAnimation: 是否重复动画。
• firstCircleAnimationDuration: 第一个圆的动画持续时间（毫秒）。
• secondCircleAnimationDuration: 第二个圆的动画持续时间（毫秒）。
• thirdCircleAnimationDuration: 第三个圆的动画持续时间（毫秒）。
• centerWidget: 圆心的小部件。
• firstCircleWidgets: 第一个圆上的小部件列表。
• secondCircleWidgets: 第二个圆上的小部件列表。
• thirdCircleWidgets: 第三个圆上的小部件列表。

通过这些参数，您可以高度定制您的圆形旋转动画，满足各种需求。希望这个示例能帮助您更好地理解和使用 circular_rotation 插件。