android - 带有自定义StrokeCap图像抖动的CircleProgress

我正在使用CustomPainter构建CircleProgressBar。

有没有办法将图像或图标放在StrokeCap内？

这是我要实现的目标:



这是我目前得到的:



这是我的代码:

import 'package:flutter/material.dart';
import 'dart:math';

class CircleProgress extends CustomPainter{
  double currentProgress;
  CircleProgress(this.currentProgress);
  @override
  void paint(Canvas canvas, Size size) {
    Paint outerCircle = Paint()
        ..strokeWidth = 20
        ..color = Color.fromRGBO(10, 10, 10, 0.1)
        ..style = PaintingStyle.stroke;

    Paint completeArc = Paint()
      ..strokeWidth = 20
      ..color = Colors.redAccent
      ..style = PaintingStyle.stroke
      ..strokeCap  = StrokeCap.round;
    Offset center = Offset(size.width/2, size.height/2);
    double radius = min(size.width/2,size.height/2) - 10;
    canvas.drawCircle(center, radius, outerCircle); // this draws main outer circle
    double angle = 2 * pi * (currentProgress/100);
    canvas.drawArc(Rect.fromCircle(center: center,radius: radius), -pi/2, angle, false, completeArc);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

最佳答案

经过多次试验，我成功了。只需在canvas.drawArc之后添加以下代码

final offset = Offset(
  center.dx + radius * cos(-pi / 2 + angle),
  center.dy + radius * sin(-pi / 2 + angle),
);
canvas.drawCircle(
  offset,
  5,
  Paint()
    ..strokeWidth = 5
    ..color = Colors.white
    ..style = PaintingStyle.fill,
);