Draw and animate a round progress Using a Custom Painter

Flutter tips Published on

Create a Round Progress Bar in Flutter

Making a round progress bar that looks good and moves smoothly in your app can be done using a special tool called a Custom Painter.

How It Works

A Custom Painter lets you draw directly onto the screen. You tell it exactly how to draw the circle and the progress arc. To make it move, you use animation.

Key Animation Points

When you pass an animation to your Custom Painter, it automatically redraws every time the animation changes. This makes the drawing update smoothly.

Updating Progress

If you are showing something like upload progress, you need to update the animation each time the progress number changes. You can start a new animation from the old progress value to the new one. Because you don't always know how long an upload will take, you can animate the progress bar after the upload value updates.

This method is great for showing progress clearly, and you can even make the animation run forever if needed, like for a loading indicator.

Save 3 months of work

Create your app using our 6 years of making Flutter apps and more than 50+ apps

kickstarter for flutter apps

Frequently Asked Questions

What is a Custom Painter in Flutter?

A Custom Painter is a class in Flutter that allows you to create custom graphics and drawings that are not available with standard widgets.

Why use Custom Painter for a round progress bar?

Using a Custom Painter gives you full control over how the progress bar looks and behaves, allowing for unique designs and smooth animations.

How do I make the progress bar animate?

You use Flutter's animation system, typically with an AnimationController and a Tween, and pass the animation value to the Custom Painter so it can redraw as the value changes.

Read more
You may also be interested in
Dart map ultimate cheatsheet  blog card image
Dart map ultimate cheatsheet
Published on 2025-05-13T07:05:07.150Z
Firebase document as entity model  blog card image
Firebase document as entity model
Published on 2025-05-12T12:43:12.615Z
ApparenceKit is a flutter template generator tool by Apparence.io © 2025.
All rights reserved