[英]How to create a flutter percentage indicator with a custom border stroke
I am going to make this widget in my app but I have no idea how to do that.我打算在我的应用程序中制作这个小部件,但我不知道该怎么做。
How can I achieve this?我怎样才能做到这一点? I've tried percent_indicator package in Flutter, but the main problem is that we have a limited amount of options.
我在 Flutter 中尝试过percent_indicator包,但主要问题是我们的选项数量有限。
Credit for drawing the drawing the dashed border to this answer为这个答案绘制虚线边框的功劳
class DashedProgressIndicator extends CustomPainter {
final double percent;
final double strokeWidth;
DashedProgressIndicator({ this.percent = 0, this.strokeWidth = 5});
final paint1 = Paint()
..color = Colors.grey[300]!
..style = PaintingStyle.stroke;
final paint2 = Paint()
..color = Colors.grey
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round;
@override
void paint(Canvas canvas, Size size) {
Offset center = Offset(size.width / 2, size.height / 2);
double radius = min(size.width / 2, size.height / 2);
final dashSize = (size.width *0.0004) / 2;
double arcAngle = 2 * pi * dashSize;
// draw dashes
for (var i = 0; i < 24; i++) {
final init = (-pi / 2)*(i/6);
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius - strokeWidth / 2),
init, arcAngle, false, paint1..strokeWidth = strokeWidth);
}
// draw progress
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius - strokeWidth / 2),
(-pi / 2), 2 * pi * percent, false, paint2..strokeWidth = strokeWidth);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Usage:用法:
CustomPaint(
painter: DashedProgressIndicator(percent: 25/100),
size: const Size(100, 100),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.