• 演示

        先看效果图：

        由于无法截取动态图，我就截过程中的两张图片表达了，我想应该能看得懂。

• 功能

        1.设置进度条半径

        2.设置进度条宽度

        3.设置进度条最大值

        4.设置进度条背景色以及前景色

        5.是否显示进度条文字

        6.文字样式设置

        7.点击进度条和进度条计时完成回调

        8.进度条是倒计时还是正计时设置

•  代码

import 'dart:async';
import 'dart:math';import 'package:flutter/material.dart';class RingProgressBar extends StatefulWidget {/// 半径final double radius;/// 环颜色final Color? ringColor;/// 环背景颜色final Color? ringBgColor;/// 环中间文字final Color? textColor;/// 环中间文字大小final double? textSize;/// 环宽度final double strokeWidth;/// 是否显示环中间文本final bool isShowText;/// 环是否是倒计时，true：是倒计时，false：顺计时final bool? isCountDown;/// 计时截至值final int? maxProgress;final VoidCallback? callback;const RingProgressBar({super.key,required this.radius,required this.strokeWidth,this.ringColor,this.ringBgColor,this.isShowText = false,this.textSize,this.textColor,this.isCountDown = true,this.maxProgress,this.callback});@overrideState createState() => _RingProgressBarState();
}class _RingProgressBarState extends State {/// 进度条当前进度值double _value = 0;/// 进度条当前进度文本String _text = "0";/// 计时器Timer? timer;@overridevoid initState() {super.initState();int count = 0;//计时器，每1毫秒执行一次const period = Duration(milliseconds: 1);timer = Timer.periodic(period, (timer) {count++;double max = (widget.maxProgress ?? 0) * 1000;//计时器结束条件if (widget.maxProgress == null ||widget.maxProgress == 0 ||count >= max) {timer.cancel();if (widget.callback != null) {//执行完成回调widget.callback!();}}//只有当widget状态为mounted时才执行setState防止内存泄露if (mounted) {setState(() {_value = count / max;_text = widget.isCountDown ?? true? ((widget.maxProgress ?? 0) - (count ~/ 1000)).toString(): (count ~/ 1000).toString();});}});}@overridevoid dispose() {//退出时关闭计时器防止内存泄露timer?.cancel();super.dispose();}@overrideWidget build(BuildContext context) {return InkWell(highlightColor: Colors.transparent,splashColor: Colors.transparent,onTap: () {if (widget.callback != null) {//点击控件回调widget.callback!();}},child: Container(width: widget.radius * 2,height: widget.radius * 2,color: Colors.transparent,child: Stack(alignment: Alignment.center,fit: StackFit.expand,children: [CustomPaint(size: Size(widget.radius * 2, widget.radius * 2),painter: _RingPrinter(this, _value),),Center(widthFactor: widget.radius * 2,heightFactor: widget.radius * 2,child: widget.isShowText? Text(_text,style: TextStyle(color: widget.textColor, fontSize: widget.textSize),): Container(),),],),));}
}class _RingPrinter extends CustomPainter {/// state对象final _RingProgressBarState state;/// 控制值:0.0->1.0，会控制绘制0.0*2*pi->1.0*2*pi即从0开始绘制一个完整的圆final double _value;_RingPrinter(this.state, this._value);@overridevoid paint(Canvas canvas, Size size) {//画笔Paint paint = Paint()..color = state.widget.ringColor ?? Colors.transparent..style = PaintingStyle.stroke..strokeWidth = state.widget.strokeWidth..isAntiAlias = true;//圆心偏移值double offset = state.widget.radius;//以offset为圆形，画半径减边线宽度一半为半径的圆Rect rect = Rect.fromCircle(center: Offset(offset, offset),radius: state.widget.radius - state.widget.strokeWidth / 2);paint.color = state.widget.ringBgColor ?? Colors.grey;//画圆背景canvas.drawCircle(Offset(offset, offset),state.widget.radius - state.widget.strokeWidth / 2, paint);paint.color = state.widget.ringColor ?? Colors.blueAccent;//让边界有弧形过渡paint.strokeCap = StrokeCap.round;//画进度条canvas.drawArc(rect, -0.5 * pi, _value * 2 * pi, false, paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}

关键代码 ，该代码可以控制从0.0*2.pi->1.0*2*pi从0开始绘制一个完整的圆，-0.5*pi这个参数是让进度条从12点钟方向开始绘制，系统默认从3点钟方向开始绘制。

//画进度条
canvas.drawArc(rect, -0.5 * pi, _value * 2 * pi, false, paint);

代码可以直接复制下来使用，注释非常完善，欢迎指正。