Updated Material 3 Progress Indicators

The LinearProgressIndicator and CircularProgressIndicator have been updated to match the Material 3 Design specifications. The LinearProgressIndicator changes 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 are not affected by the updated design spec.

The LinearProgressIndicator and CircularProgressIndicator widgets each have a year2023 flag that can be set to false to opt into the updated design spec. 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 will have gaps between active and inactive tracks, a stop indicator, and rounded corners. If the LinearProgressIndicator is indeterminate, the stop indicator will not be shown.

When CircularProgressIndicator.year2023 is set to false, the progress indicator will have 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 opt into the updated design spec for the CircularProgressIndicator, set the year2023 flag to false:

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

Landed in version: v3.27.0-0.2.pre.
In stable release: TBD

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

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-11-20. View source or report an issue.