Skip to main content

Updated Material 3 progress indicators

Summary

#

The LinearProgressIndicator and CircularProgressIndicator have been updated to match the Material 3 Design specifications.

The LinearProgressIndicatorchanges include a gap between the active and inactive tracks, a stop indicator, and rounded corners. The CircularProgressIndicator changes include a gap between the active and inactive tracks, and rounded stroke cap.

Context

#

The Material 3 Design specifications for the LinearProgressIndicator and CircularProgressIndicator were updated in December 2023.

To opt into the 2024 design specifications, set the LinearProgressIndicator.year2023 and CircularProgressIndicator.year2023 flags to false. This is done to ensure that existing apps aren't affected by the updated design spec.

Description of change

#

The LinearProgressIndicator and CircularProgressIndicator widgets each have a year2023 flag that can be set to false to opt in to the updated design specification. The default value for the year2023 flag is true, which means that the progress indicators use the 2023 design spec.

When LinearProgressIndicator.year2023 is set to false, the progress indicator have gaps between active and inactive tracks, a stop indicator, and rounded corners. If the LinearProgressIndicator is indeterminate, the stop indicator isn't shown.

When CircularProgressIndicator.year2023 is set to false, the progress indicator has a track gap and rounded stroke cap.

Migration guide

#

To opt into the updated design spec for the LinearProgressIndicator, set the year2023 flag to false:

dart 
LinearProgressIndicator(
  year2023: false,
  value: 0.5,
),

To update your entire app to use the updated LinearProgressIndicator design, set the ProgressIndicatorThemeData.year2023 property to false in your MaterialApp:

dart 
return MaterialApp(
  theme: ThemeData(progressIndicatorTheme: const ProgressIndicatorThemeData(year2023: false)),
        // ...
        LinearProgressIndicator(
          year2023: false,
          value: 0.5,
        ),
        // ...

To opt into the updated design spec for the CircularProgressIndicator, set the year2023 flag to false:

dart 
CircularProgressIndicator(
  year2023: false,
  value: 0.5,
),

To update your entire app to use the updated CircularProgressIndicator design, set the ProgressIndicatorThemeData.year2023 property to false in your MaterialApp:

dart 
return MaterialApp(
  theme: ThemeData(progressIndicatorTheme: const ProgressIndicatorThemeData(year2023: false)),
        // ...
        CircularProgressIndicator(
          year2023: false,
          value: 0.5,
        ),
        // ...

Timeline

#

Landed in version: 3.28.0-0.1.pre
In stable release: 3.29

References

#

API documentation:

Relevant issues:

Relevant PRs:

Unless stated otherwise, the documentation on this site reflects Flutter 3.35.5. Page last updated on 2025-10-28. View source or report an issue.