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),
);
}
额外信息
示例代码
示例项目
开始使用
这是一个用于启动 Flutter 应用程序的项目。
如果你是第一次使用 Flutter,以下是一些资源帮助你开始:
查看 Flutter 文档,以获取教程、示例、移动开发指南和完整的 API 参考。
更多关于Flutter多圆形图表插件multiple_circle_chart的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于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
插件来创建一个包含三个同心圆的多圆形图表,每个圆环有不同的值、颜色以及可选的圆环宽度和间距。你可以根据实际需求调整这些参数。