Updated Material 3 progress indicators

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.

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.

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.

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

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:

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:

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:

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

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

API documentation:

• LinearProgressIndicator
• CircularProgressIndicator
• LinearProgressIndicator.year2023
• CircularProgressIndicator.year2023

Relevant issues:

• Update both ProgressIndicator for Material 3 redesign

Relevant PRs:

• Update Material 3 LinearProgressIndicator for new visual style
• Update Material 3 CircularProgressIndicator for new visual style