CircularProgressIndicator class

A Material Design circular progress indicator, which spins to indicate that the application is busy.

A widget that shows progress along a circle. There are two kinds of circular progress indicators:

• Determinate. Determinate progress indicators have a specific value at each point in time, and the value should increase monotonically from 0.0 to 1.0, at which time the indicator is complete. To create a determinate progress indicator, use a non-null value between 0.0 and 1.0.
• Indeterminate. Indeterminate progress indicators do not have a specific value at each point in time and instead indicate that progress is being made without indicating how much progress remains. To create an indeterminate progress indicator, use a null value.

The indicator arc is displayed with valueColor, an animated value. To specify a constant color use: AlwaysStoppedAnimation<Color>(color).

This example showcases determinate and indeterminate CircularProgressIndicators. The CircularProgressIndicators will use the when setting the CircularProgressIndicator.year2023 flag to false.

link

To create a local project with this code sample, run:
flutter create --sample=material.CircularProgressIndicator.1 mysample

Animation synchronization

When multiple CircularProgressIndicators or LinearProgressIndicators are animating on screen simultaneously (e.g., in a list of loading items), their uncoordinated animations can appear visually cluttered. To address this, the animation of an indicator can be driven by a custom AnimationController.

This allows multiple indicators to be synchronized to a single animation source. The most convenient way to achieve this for a group of indicators is by providing a controller via ProgressIndicatorTheme (see ProgressIndicatorThemeData.controller). All CircularProgressIndicators or LinearProgressIndicators within that theme's subtree will then share the same animation, resulting in a more coordinated and visually pleasing effect.

Alternatively, a specific AnimationController can be passed directly to the controller property of an individual indicator.

See also:

• LinearProgressIndicator, which displays progress along a line.
• RefreshIndicator, which automatically displays a CircularProgressIndicator when the underlying vertical scrollable is overscrolled.
• material.io/design/components/progress-indicators.html#circular-progress-indicators