Flutter开发圆形计时进度条RingProgressBar

• 演示

        先看效果图：

        

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

• 功能

        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});

  @override
  State<StatefulWidget> createState() => _RingProgressBarState();
}

class _RingProgressBarState extends State<RingProgressBar> {
  /// 进度条当前进度值
  double _value = 0;
  /// 进度条当前进度文本
  String _text = "0";
  /// 计时器
  Timer? timer;

  @override
  void 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();
        });
      }
    });
  }

  @override
  void dispose() {
    //退出时关闭计时器防止内存泄露
    timer?.cancel();
    super.dispose();
  }

  @override
  Widget 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);

  @override
  void 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);
  }

  @override
  bool 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);

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