Flutter: Build Circular Progress with CustomPaint and Animation

Hey, you are on the right way if you come with a question about how to draw something in Flutter. For example when you need to draw something like a Progress indicator in a circle shape.

I’ll show you how to do that for the next platforms on the Flutter:
Android, iOS, Web, macOS

Declaration

First of all, you’ll need to declare the CustomPaint also wrap it with a SizedBox or a Container if you do want to constraint paint (ala Canvas) size.

Then declare a new class extend CustomPainter and implement two functions:

• void paint(Canvas canvas, Size size) - called each time to draw something on a canvaswith size of the paint area.
• bool shouldRepaint(covariant CustomPainter oldDelegate) - called before each render time and return true if the function paint() should be invoked to repaint canvas otherwise, return false. In a simple way, you can compare this and oldDelegate, or just return literal true to redraw canvas always.