CircleProgress with custom StrokeCap Image Flutter
629
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,
);
Author by
Len_X
South African based programmer and all things tech related enthusiast. Career developer since 2013 and always keen on learning and understanding new ways to solve code related problems. Specializing in mobile development.
Updated on December 14, 2022Comments
-
Len_X over 1 year
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; } }