Flutter多圆形图表插件multiple_circle_chart的使用

Flutter多圆形图表插件multiple_circle_chart的使用

环境

environment:
  sdk: ">=2.17.6 <3.0.0"

介绍

圆形图表可以进行动画展示,达到100%或以上。

条形图在指定位置重叠。

特性

内存使用情况

开始使用

在数据类中设置值

circleSetProgress = MultipleCircleSetProgress(circle: c);

late CircleDataItem c = CircleDataItem(
  
  /// circleForwardFlg 是前进还是反转。
  circleForwardFlg: true,

  /// CircleShader 是结束类型圆圈。None 表示没有旋钮。
  circleShader: CircleShader.circleNone,

  /// complementCircle 是调整圆圈变大或变小时的调优。
  complementCircle: 0.05,

  /// circleSizeValue。
  circleSizeValue: _circleSize,

  /// circleStrokeWidth 是圆圈的厚度。
  circleStrokeWidth: 30.0,

  /// circleShadowValue 是阴影范围值
  circleShadowValue: 0.01,

  /// circleDuration 是圆形动画速度
  circleDuration: _speedValue.toInt(),

  /// circleColor 是旋钮的颜色。
  circleColor: Colors.green,

  /// circleShadowColor 是旋钮的阴影颜色。
  circleShadowColor: Colors.black,

  /// circleRoundColor 是圆的基本颜色。
  circleRoundColor: Colors.grey,

  /// circleController 是 CircleProgressController。
  circleController: controller,

  /// circleColorList 是决定渐变颜色。
  circleColorList: setColor);

双数组中最后一个元素和下一个元素首先具有相同的颜色并形成渐变

final List<List<Color>> setColor = [
  [Colors.white, Colors.blue],
  [Colors.blue, Colors.orange],
  [Colors.orange, Colors.yellow],
  [Colors.yellow, Colors.purple],
  [Colors.purple, Colors.lime],
  [Colors.lime, Colors.limeAccent],
  [Colors.limeAccent, Colors.pink],
  [Colors.pink, Colors.brown],
  [Colors.brown, Colors.white],
  [Colors.white, Colors.green],
  [Colors.green, Colors.deepOrangeAccent],
  [Colors.deepOrangeAccent, Colors.lightBlueAccent],
];

将设置的值传递给 CircleProgressControllerClass 的控制器

final CircleProgressController controller = CircleProgressController();

/// 设置动画值、速度、前进方向和反向方向。
OutlinedButton setButton(bool forwardFlg, double counterValue, double circleLabelValue) {
  return OutlinedButton(
    onPressed: () {
      _scrollController.jumpTo(0.0);
      c.circleForwardFlg = forwardFlg;
      c.circleCounterValue = counterValue;
      c.circleLabelSpeedValue = circleLabelValue;
      c.circleLabelValue = circleLabelValue;
      controller
          .setProgress([c.circleCounterValue ?? 0, c.circleLabelValue ?? 0]);
    },
    child: const Icon(Icons.play_circle),
  );
}

额外信息

https://twitter.com/dbank0208

dbank0208@gmail.com


示例代码

示例项目

开始使用

这是一个用于启动 Flutter 应用程序的项目。

如果你是第一次使用 Flutter,以下是一些资源帮助你开始:

查看 Flutter 文档,以获取教程、示例、移动开发指南和完整的 API 参考。


更多关于Flutter多圆形图表插件multiple_circle_chart的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter多圆形图表插件multiple_circle_chart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用multiple_circle_chart插件来创建多圆形图表的示例代码。这个插件允许你通过定义多个同心圆来展示数据。

首先,确保你已经在pubspec.yaml文件中添加了multiple_circle_chart依赖:

dependencies:
  flutter:
    sdk: flutter
  multiple_circle_chart: ^最新版本号 # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以使用以下代码来创建一个多圆形图表:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multiple Circle Chart Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multiple Circle Chart Example'),
        ),
        body: Center(
          child: MultipleCircleChart(
            data: [
              // 第一个圆环的数据
              CircleData(
                value: 75, // 当前值
                maxValue: 100, // 最大值
                color: Colors.blue, // 颜色
              ),
              // 第二个圆环的数据
              CircleData(
                value: 50,
                maxValue: 100,
                color: Colors.green,
                strokeWidth: 10.0, // 可选:设置圆环宽度
              ),
              // 第三个圆环的数据
              CircleData(
                value: 25,
                maxValue: 100,
                color: Colors.red,
                innerGap: 20.0, // 可选:设置与上一个圆环的间距
              ),
            ],
            size: 200.0, // 图表的总大小
            center: Icon(Icons.star, color: Colors.yellow, size: 40), // 可选:中心图标
          ),
        ),
      ),
    );
  }
}

class CircleData {
  final double value;
  final double maxValue;
  final Color color;
  final double strokeWidth; // 可选
  final double innerGap; // 可选

  CircleData({
    required this.value,
    required this.maxValue,
    required this.color,
    this.strokeWidth = 5.0,
    this.innerGap = 10.0,
  });
}

注意:CircleData类在multiple_circle_chart包中通常已经定义好了,这里只是为了说明数据结构而自行定义了一个类似的类。实际使用时,你应该直接使用包中提供的CircleData类。

在实际代码中,你应该直接引用包中的CircleData类,像这样:

import 'package:multiple_circle_chart/multiple_circle_chart.dart' show CircleData;

然后直接使用CircleData类来创建数据列表。

这个示例展示了如何使用multiple_circle_chart插件来创建一个包含三个同心圆的多圆形图表,每个圆环有不同的值、颜色以及可选的圆环宽度和间距。你可以根据实际需求调整这些参数。

回到顶部