Flutter's CircularProgressIndicator: A Short Guide

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:

Copycopy code to clipboard
1CircularProgressIndicator()

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

Copycopy code to clipboard
1CircularProgressIndicator(
2  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
3  backgroundColor: Colors.grey,
4  strokeWidth: 5,
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.

Copycopy code to clipboard
1CircularProgressIndicator(
2  value: 0.5,
3)

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.

Copycopy code to clipboard
1CircularProgressIndicator(
2  value: null,
3)

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:

Copycopy code to clipboard
1Column(
2  mainAxisAlignment: MainAxisAlignment.center,
3  children: <Widget>[
4    CircularProgressIndicator(),
5    SizedBox(height: 20),
6    Text('Loading...'),
7  ],
8)

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.