在flutter开发中，构建一个具有视觉吸引力的、反映进度的圆形弧形进度条是一个常见需求。本文将详细介绍如何使用flutter和dart语言实现这一功能。最终效果如图：
首先，我们需要导入必要的包和库，比如dart:math和package:flutter/material.dart。这些库为绘制和样式提供基础支持。
接下来，创建一个arcprogresspainter类，它继承自custompainter。这个类的核心是paint方法，用于绘制进度条。我们使用canvas对象和size对象来确定绘制区域，并利用数学运算确定圆心、半径等参数。
此外，文章还将展示如何使用线性渐变（lineargradient）来美化进度条，以及如何计算角度和绘制圆弧。这包括如何根据进度动态变化圆弧的颜色和位置。
最后，我们将创建一个arcprogressbar组件，它包装了custompaint，并使用上面定义的arcprogresspainter来实现视觉效果。
整个过程不仅涉及基础的flutter绘图技术，还包含一些高级的定制化元素，如颜色计算和动态布局调整。通过本文，读者可以学习如何灵活运用flutter框架的绘图能力，为自己的应用程序添加独特且富有表现力的ui组件。
完整代码如下：
import 'dart:math' as math;
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:otterlife/component/theme/extension.dart';
class arcprogresspainter extends custompainter {
final double progress;
final color backgroundcolor;
final double strokewidth;
final textstyle textstyle;
arcprogresspainter({
required this.progress,
required this.backgroundcolor,
required this.strokewidth,
required this.textstyle,
});
@override
void paint(canvas canvas, size size) {
final gradientcolors = [const color(0xffffc75a), const color(0xff6daff9), const color(0xff31a7ae)];
final gradient = lineargradient(
begin: alignment.centerleft,
end: alignment.centerright,
colors: gradientcolors,
);
offset center = offset(size.width / 2, size.height / 2);
double radius = math.min(size.width / 2, size.height / 2);
rect rect = rect.fromcircle(center: center, radius: radius).inflate(-strokewidth / 2);
double degreestoradians(num deg) => deg * (math.pi / 180.0);
double startangle = degreestoradians(90 40);
double sweepangle = degreestoradians(360 - 80);
for (double i = 0; i < sweepangle; i = 0.01) {
double angle = startangle i;
double colorposition = i / sweepangle;
color color = _calculategradientcolor(gradientcolors, colorposition);
paint segmentpaint = paint()
..color = color
..strokewidth = strokewidth
..strokecap = strokecap.round
..style = paintingstyle.stroke;
canvas.drawarc(
rect,
angle,
0.01, // 绘制小段的角度
false,
segmentpaint,
);
}
double sliderangle = startangle progress * sweepangle;
offset sliderposition = offset(
center.dx (radius - strokewidth / 2) * cos(sliderangle),
center.dy (radius - strokewidth / 2) * sin(sliderangle),
);
double sliderradius = 28 / 2;
paint sliderpaint = paint()..color = _calculateslidercolor(progress); // assuming you have this method
canvas.drawcircle(sliderposition, sliderradius, sliderpaint);
paint whitecenterpaint = paint()..color = colors.white;
canvas.drawcircle(sliderposition, 16 / 2, whitecenterpaint);
}
color _calculategradientcolor(list colors, double position) {
int index = (position * (colors.length - 1)).floor();
double localposition = (position * (colors.length - 1)) - index;
return color.lerp(colors[index], colors[index 1], localposition) ?? colors.last;
}
color _calculateslidercolor(double progress) {
final colors = [const color(0xffffc75a), const color(0xff6daff9), const color(0xff31a7ae)];
progress = progress.clamp(0.0, 1.0);
double colorposition = progress * (colors.length - 1);
int index = colorposition.floor();
int nextindex = (index 1).clamp(0, colors.length - 1);
double t = colorposition - index;
return color.lerp(colors[index], colors[nextindex], t) ?? colors.first;
}
double convertradiustosigma(double radius) {
return radius * 0.57735 0.5;
}
@override
bool shouldrepaint(covariant custompainter olddelegate) => true;
}
class arcprogressbar extends statelesswidget {
final double progress;
final double strokewidth;
const arcprogressbar({
super.key,
required this.progress,
this.strokewidth = 16,
});
@override
widget build(buildcontext context) {
return custompaint(
painter: arcprogresspainter(
progress: progress,
backgroundcolor: colors.red,
strokewidth: strokewidth,
textstyle: colors.red,
),
);
}
}
