使用计时器从画布上绘制矩形

Question

我正在尝试创建一个计时器，该计时器绘制一个矩形的轮廓并在计时器到期时完成。计时器持续时间为10秒。所以我设法做了一个圈：

但是，我似乎无法将其集成到矩形中。就像我使用canvas.drawRect()时一样，它只是绘制矩形而没有根据计时器填充矩形。

这是带有圆圈的自定义画家类：

class TimerPainter extends CustomPainter {
  TimerPainter({
    this.animation,
    this.backgroundColor,
    this.color,
  }) : super(repaint: animation);

  final Animation<double> animation;
  final Color backgroundColor, color;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.white
      ..strokeWidth = 1.5
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke;

    double progress = (1.0 - animation.value) * 2 * math.pi;
    canvas.drawArc(Offset.zero & size, math.pi * 1.5, progress, false, paint);
  }

  @override
  bool shouldRepaint(TimerPainter old) {
    return animation.value != old.animation.value ||
        color != old.color ||
        backgroundColor != old.backgroundColor;
  }
}

我要实现的形状：

我尝试过：

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.white
      ..strokeWidth = 1.5
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke;

    // double progress = (1.0 - animation.value) * 2 * math.pi;
    // canvas.drawArc(Offset.zero & size, math.pi * 1.5, progress, false, paint);

    Path path = Path();
    var radius = Radius.circular(5.0);
    RRect rretc = RRect.fromLTRBAndCorners(
      size.width*1.2, 
      size.height/1.4, 
      0.0, 
      0.0, 
      topLeft: radius,
      topRight: radius,
      bottomLeft: radius, 
      bottomRight: radius
    );
    path.addRRect(rretc);

    for (PathMetric iterator in path.computeMetrics()){
      canvas.drawPath(iterator.extractPath(0.0, animation.value), paint);
    }
  }

我所看到的只是一个点：

  

更新：点是因为它实际上正在绘制，但是速度太慢，因此我只看到一个点。使用progress*100代替animation.value足够快来绘制形状。现在，我只需要调整时间以适应10秒。