CircleProgress с пользовательским StrokeCap ​​Image Flutter

Question

Я создаю CircleProgressBar, используя CustomPainter.

Есть ли способ поместить изображение или значок в 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;
  }
}

Answer 1

После многих испытаний мне это удается. Просто добавьте следующий код после 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,
);