Skip to content

Flutter's CircularProgressIndicator: A Short Guide

Flutter, CircularProgressIndicator1 min read

When an app is doing something that takes some time, users may not know if the app is frozen or if it's still working. To avoid confusion and keep the user informed, you can add a progress indicator to your app.

In Flutter, the CircularProgressIndicator widget provides a circular progress bar. In this short guide, we'll cover the basics of using this widget in your app.

Creating a CircularProgressIndicator

To create a CircularProgressIndicator, simply add it to your widget tree:


You can customize the appearance of the progress indicator with different properties such as valueColor, backgroundColor, and strokeWidth. Here's an example:

2 valueColor: AlwaysStoppedAnimation<Color>(,
3 backgroundColor: Colors.grey,
4 strokeWidth: 5,

This will display a red progress indicator with a gray background color and a stroke width of 5 pixels.

Controlling the Progress Indicator

By default, the progress indicator animates continuously in a loop. However, you can control the progress with the value property.

2 value: 0.5,

This indicates that the progress is half done.

If you want to show an indeterminate progress (when you don't know the duration or completion status), set the value property to null.

2 value: null,

This will show an infinite progress loop.

Adding a Label

You can add a label to the progress indicator by wrapping it with a Column widget:

2 mainAxisAlignment:,
3 children: <Widget>[
4 CircularProgressIndicator(),
5 SizedBox(height: 20),
6 Text('Loading...'),
7 ],

In Closing

The CircularProgressIndicator widget is a simple way to add a visual indication of progress to your app's UI. By customizing its appearance and controlling its progress, you can make your app more user-friendly.