Flutter圆形动画插件circulito的使用

简介

Circulito 提供了一种高度可定制的方式，用于绘制和动画化环形/甜甜圈/饼图以可视化数据。它具有以下特点：

• 显示带有自定义区段的环形/甜甜圈/饼图。
• 通过提供金额或百分比及对应颜色轻松可视化数据。
• 区段和背景的渐变装饰。
• 交互式区段：hover 和 onTap 事件。
• 支持多层级嵌套。
• 动画化的区段。

示例功能

Donut 和 Pie 图表

动态图表与动画区段

倒计时

Apple 风格健身环

入门指南

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  circulito: ^1.0.1

使用方法

基本用法

Circulito(
    maxSize: 480,
    sections: [
        // 单个区段占50%
        CirculitoSection(
          value: 0.5,
          decoration: const CirculitoDecoration.fromColor(Colors.amber),
        )
    ],
);

自定义配置

Circulito(
  maxSize: 480,
  padding: 20.0,
  key: GlobalKey(),
  strokeWidth: 150,
  isCentered: true,
  onHoverExit: () {},
  startPoint: StartPoint.left,
  animation: CirculitoAnimation(),
  background: CirculitoBackground(),
  strokeCap: CirculitoStrokeCap.round,
  direction: CirculitoDirection.clockwise,
  sectionValueType: SectionValueType.amount,
  childStackingOrder: ChildStackingOrder.behindParent,
  sections: [
    // 男性比例
    CirculitoSection(
      value: 750,
      decoration: const CirculitoDecoration.fromColor(
        Colors.blue,
        hoverColor: Colors.blueAccent,
      ),
    ),

    // 女性比例
    CirculitoSection(
      value: 997,
      decoration: const CirculitoDecoration.fromColor(
        Colors.pink,
        hoverColor: Colors.pinkAccent,
        shadow: CirculitoShadow(),
        border: CirculitoBorder(
          color: Colors.white,
          size: 3.0,
        ),
      ),
    ),
  ],
  child: const Text('Genders'),
);

使用金额值

Circulito(
  sectionValueType: SectionValueType.amount,
  sections: [
      CirculitoSection(
        value: 535, // 金额值而非百分比
        color: Colors.blue,
      ),
    //...其他金额值区段
  ]

  // ...其他 Circulito 属性
);

添加动画

Circulito(
  animation: CirculitoAnimation(),
  // ...其他 Circulito 属性
);

也可以自定义动画的持续时间和曲线：

Circulito(
  animation: CirculitoAnimation(
    duration: 200,
    curve: Curves.easeInOut,
  ),
  // ...其他 Circulito 属性
);

装饰设置

Circulito(
    background: CirculitoBackground(
        // 使用颜色装饰背景
        decoration: CirculitoDecoration.fromColor(
            Colors.white,
            hoverColor: Colors.grey,
        ),
    ),
    sections: [
        CirculitoSection(
            value: 0.5,
            // 使用渐变装饰区段
            decoration: CirculitoDecoration.fromGradient(
                const LinearGradient(colors: [Colors.green, Colors.yellow]),
            ),
      ),
  ]
  // ...其他 Circulito 属性
);

添加阴影

decoration: const CirculitoDecoration.fromColor(
    Colors.grey,
    // 默认灰色阴影
    shadow: CirculitoShadow(),
),

或者自定义阴影：

decoration: CirculitoDecoration.fromColor(
    Colors.grey,
    // 自定义阴影
    shadow: CirculitoShadow(
        spreading: 16.0,
        blurStyle: BlurStyle.normal,
        color: Colors.blueGrey.withOpacity(.3),
    ),
),

添加边框

decoration: const CirculitoDecoration.fromColor(
    Colors.grey,
    // 默认黑色边框
    border: CirculitoBorder(),
),

或者自定义边框：

decoration: CirculitoDecoration.fromColor(
    Colors.grey,
    // 自定义边框
    border: CirculitoBorder(
        size: 8.0,
        color: Colors.blueGrey,
    ),
),

区段交互

Circulito(
  sections: [
      CirculitoSection(
        ...// 必要属性
        onHover: _doHoverAction,
        onTap: _doTapAction,
      ),
  ]
  // ...其他 Circulito 属性
);

参数列表

完整示例代码

下面是一个完整的示例代码，展示了如何使用 Circulito 创建一个简单的环形图表：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Circulito Example')),
        body: Center(
          child: Circulito(
            maxSize: 200,
            sections: [
              CirculitoSection(
                value: 0.3,
                decoration: const CirculitoDecoration.fromColor(Colors.red),
              ),
              CirculitoSection(
                value: 0.5,
                decoration: const CirculitoDecoration.fromColor(Colors.green),
              ),
              CirculitoSection(
                value: 0.2,
                decoration: const CirculitoDecoration.fromColor(Colors.blue),
              ),
            ],
            animation: CirculitoAnimation(
              duration: 1000,
              curve: Curves.easeInOut,
            ),
            onHover: (index) => print('Hovered on section $index'),
            onTap: (index) => print('Tapped on section $index'),
          ),
        ),
      ),
    );
  }
}

这个示例创建了一个包含三个区段的环形图表，并为每个区段设置了不同的颜色和动画效果。同时，还添加了鼠标悬停和点击事件处理程序。

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