CircleProgress with custom StrokeCap Image Flutter

Question

I am building a CircleProgressBar Using CustomPainter.

Is there a way to put an Image or Icon inside of the StrokeCap?

Here is what I want to achieve:

And here is what I'm currently getting:

Here is my Code:

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

After many trials, I succeed. Just add below code after 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,
);