Update Material 3 `LinearProgressIndicator` for new visual style by TahaTesser · Pull Request #154817 · flutter/flutter

TahaTesser · 2024-09-09T10:57:33Z

Related to Update both ProgressIndicator for Material 3 redesign

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isRTL = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Directionality(
          textDirection: isRTL ? TextDirection.rtl : TextDirection.ltr,
          child: Center(
            child: Column(
              spacing: 2.0,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text('Default LinearProgressIndicator'),
                const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(
                    year2023: false,
                    value: 0.45,
                  ),
                ),
                const Text('Default indefinite LinearProgressIndicator'),
                const Padding(
                  padding: EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(
                    year2023: false,
                  ),
                ),
                const Text('Updated height and border radius'),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(
                    year2023: false,
                    value: 0.25,
                    minHeight: 16.0,
                    borderRadius: BorderRadius.circular(16.0),
                  ),
                ),
                const Text('Updated stop indicator color and radius'),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(
                    year2023: false,
                    value: 0.74,
                    minHeight: 16.0,
                    borderRadius: BorderRadius.circular(16.0),
                    stopIndicatorColor: Theme.of(context).colorScheme.error,
                    stopIndicatorRadius: 32.0,
                  ),
                ),
                const Text('Track gap and stop indicator radius set to 0'),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: LinearProgressIndicator(
                    year2023: false,
                    value: 0.50,
                    minHeight: 16.0,
                    borderRadius: BorderRadius.circular(16.0),
                    trackGap: 0,
                    stopIndicatorRadius: 0,
                  ),
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {
            setState(() {
              isRTL = !isRTL;
            });
          },
          label: const Text('Toggle Direction'),
        ),
      ),
    );
  }
}

Preview

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

QuncCccccc · 2024-09-12T20:01:28Z

Thanks for the update😍! Sorry for the late response. I will review this one ASAP!

QuncCccccc

This looks great! Thanks a lot for the update!!

TahaTesser · 2024-09-27T10:39:13Z

Addressed feedback, I also fixed some properties which should've been nullable :)

QuncCccccc

LGTM:) Thanks for the fix! Somehow the Google testing is not triggered. I think there might be some breakages in g3.

QuncCccccc · 2024-10-01T18:41:30Z

This also cause a lot of breakages in G3. Like the Slider PR, we probably should do the same thing (even though we haven't decided which approach we are going to take:))

TahaTesser · 2024-10-01T19:04:17Z

@QuncCccccc tbh I'm not surprised. This has similar changes as Slider. and that's why I filed this PR to see what happens. And there will be more PRs for RangeSlider and CircularProgressIndicator.

Maybe we need a global flag we decide to choose flag to opt-in for these updated widgets?

QuncCccccc · 2024-10-01T20:12:02Z

Maybe we need a global flag we decide to choose flag to opt-in for these updated widgets?

I would prefer 4 flags for individual widgets(Slider, RangeSlider, Linear/Circular-progressIndicator). Because not too many widgets need this flag and I don't think there will be more token update for other Material 3 widgets, so one flag for each is probably okay. When we need to support Material 3+ in the future, a global flag is probably more desired?

TahaTesser · 2024-10-08T11:44:52Z

Add a new flag to get the previous M3 design, defaults to false. Similar to the Slider PR

QuncCccccc

Sorry for the late response! I will catch up my review list this week!

QuncCccccc · 2024-10-28T19:19:53Z

+      'Use ProgressIndicatorTheme to customize the ProgressIndicator appearance. '
+      'This feature was deprecated after v3.26.0-0.1.pre.'
+    )
+    this.year2023 = false,


Should here default to true if the flag called year2023? I think from our discussion in the design doc, we want the flag defaults to a value which doesn't cause breaking changes. Like in the doc, the original flag is called gappedStyle and we want it default to false to hide the latest look:). Similar to the Slider PR.

Ohhh i was thinking opposite so we users just can just turn off new design manually but setting to true by default makes sense if we don't wanna any breaking changes initially.

I updated the PR and looks like all existing tests are green 🎉

I'll write migration guide for the new flag as we're deprecating right away in this PR. WDYT?

A migration guide would be super helpful! Thanks a lot! We can also create an example to toggle the two progress indicator themes so that when this flag is removed in the future, users can copy and paste the old theme from the example if they really want.

As i started to write the migration guide i realized they've relatively small updates compare to Sliders. I think it'd be best to write single migration guide for both progress indicators (Linear and Circular). Now that we've a clear direction with the flag.

We can land this PR and I'm already working on circular progress indicator update PR. I'll include both widgets in a single progress indicators migration guide. It'd also be easier to track the changes for users.

Sounds good! Since the flag will not be removed immediately, I think it's fine to have a single migration guide for both progress indicators! Thanks a lot!

QuncCccccc

LGTM! Thanks a lot for adding the flag!

justinmc · 2024-10-30T18:10:06Z

Adding autosubmit but stop me if there was still something to address here!

…yle (flutter/flutter#154817)

Manual roll requested by [email protected] flutter/flutter@fe71cad...0fe6153 2024-10-31 [email protected] Roll Flutter Engine from c40b0b602822 to f2154ef3e31c (8 revisions) (flutter/flutter#157926) 2024-10-31 [email protected] Hides added routes before top-most route finishes pushing (flutter/flutter#156104) 2024-10-31 [email protected] Fix cursor on hover expand/collapse icon (#155207) (flutter/flutter#155209) 2024-10-31 [email protected] Add test for `media_query_data.system_gesture_insets.0.dart` (flutter/flutter#157854) 2024-10-31 [email protected] Add and plumb `useImplicitPubspecResolution` across `flutter_tools`. (flutter/flutter#157879) 2024-10-31 [email protected] Roll Flutter Engine from 090c33aeae83 to c40b0b602822 (1 revision) (flutter/flutter#157896) 2024-10-31 [email protected] Roll Flutter Engine from 9295eeb6d3ce to 090c33aeae83 (4 revisions) (flutter/flutter#157893) 2024-10-30 [email protected] Roll Flutter Engine from 2bd854e23b61 to 9295eeb6d3ce (5 revisions) (flutter/flutter#157882) 2024-10-30 [email protected] Adds a new helpful tool exit message for SocketExceptions thrown during mdns discovery (flutter/flutter#157638) 2024-10-30 [email protected] Fix `GlowingOverscrollIndicator` examples (flutter/flutter#155203) 2024-10-30 [email protected] Roll Flutter Engine from 906a7ad88052 to 2bd854e23b61 (1 revision) (flutter/flutter#157878) 2024-10-30 [email protected] Upgrade templates to AGP 8.7/Gradle 8.10.2 (flutter/flutter#157872) 2024-10-30 [email protected] Roll Flutter Engine from 57ed5d338e7e to 906a7ad88052 (13 revisions) (flutter/flutter#157875) 2024-10-30 [email protected] Update Material 3 `LinearProgressIndicator` for new visual style (flutter/flutter#154817) 2024-10-30 [email protected] Roll Flutter Engine from 999797a2f690 to 57ed5d338e7e (5 revisions) (flutter/flutter#157833) 2024-10-30 [email protected] Add hidden `--no-implicit-pubspec-resolution` flag for one stable release. (flutter/flutter#157635) 2024-10-30 [email protected] Roll Packages from 028027e to 7cc1caa (5 revisions) (flutter/flutter#157864) 2024-10-30 [email protected] Mention partial PRs in the contributing docs (flutter/flutter#157863) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

Related to [Update Material 3 `CircularProgressIndicator` for new visual style](flutter/flutter#158104) and [Update Material 3 `LinearProgressIndicator` for new visual style](flutter/flutter#154817) ## Presubmit checklist - [x] This PR is marked as draft with an explanation if not meant to land until a future stable release. - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer.

…yle (flutter/flutter#154817)

) Manual roll requested by [email protected] flutter/flutter@fe71cad...0fe6153 2024-10-31 [email protected] Roll Flutter Engine from c40b0b602822 to f2154ef3e31c (8 revisions) (flutter/flutter#157926) 2024-10-31 [email protected] Hides added routes before top-most route finishes pushing (flutter/flutter#156104) 2024-10-31 [email protected] Fix cursor on hover expand/collapse icon (#155207) (flutter/flutter#155209) 2024-10-31 [email protected] Add test for `media_query_data.system_gesture_insets.0.dart` (flutter/flutter#157854) 2024-10-31 [email protected] Add and plumb `useImplicitPubspecResolution` across `flutter_tools`. (flutter/flutter#157879) 2024-10-31 [email protected] Roll Flutter Engine from 090c33aeae83 to c40b0b602822 (1 revision) (flutter/flutter#157896) 2024-10-31 [email protected] Roll Flutter Engine from 9295eeb6d3ce to 090c33aeae83 (4 revisions) (flutter/flutter#157893) 2024-10-30 [email protected] Roll Flutter Engine from 2bd854e23b61 to 9295eeb6d3ce (5 revisions) (flutter/flutter#157882) 2024-10-30 [email protected] Adds a new helpful tool exit message for SocketExceptions thrown during mdns discovery (flutter/flutter#157638) 2024-10-30 [email protected] Fix `GlowingOverscrollIndicator` examples (flutter/flutter#155203) 2024-10-30 [email protected] Roll Flutter Engine from 906a7ad88052 to 2bd854e23b61 (1 revision) (flutter/flutter#157878) 2024-10-30 [email protected] Upgrade templates to AGP 8.7/Gradle 8.10.2 (flutter/flutter#157872) 2024-10-30 [email protected] Roll Flutter Engine from 57ed5d338e7e to 906a7ad88052 (13 revisions) (flutter/flutter#157875) 2024-10-30 [email protected] Update Material 3 `LinearProgressIndicator` for new visual style (flutter/flutter#154817) 2024-10-30 [email protected] Roll Flutter Engine from 999797a2f690 to 57ed5d338e7e (5 revisions) (flutter/flutter#157833) 2024-10-30 [email protected] Add hidden `--no-implicit-pubspec-resolution` flag for one stable release. (flutter/flutter#157635) 2024-10-30 [email protected] Roll Packages from 028027e to 7cc1caa (5 revisions) (flutter/flutter#157864) 2024-10-30 [email protected] Mention partial PRs in the contributing docs (flutter/flutter#157863) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

) Manual roll requested by [email protected] flutter/flutter@fe71cad...0fe6153 2024-10-31 [email protected] Roll Flutter Engine from c40b0b602822 to f2154ef3e31c (8 revisions) (flutter/flutter#157926) 2024-10-31 [email protected] Hides added routes before top-most route finishes pushing (flutter/flutter#156104) 2024-10-31 [email protected] Fix cursor on hover expand/collapse icon (#155207) (flutter/flutter#155209) 2024-10-31 [email protected] Add test for `media_query_data.system_gesture_insets.0.dart` (flutter/flutter#157854) 2024-10-31 [email protected] Add and plumb `useImplicitPubspecResolution` across `flutter_tools`. (flutter/flutter#157879) 2024-10-31 [email protected] Roll Flutter Engine from 090c33aeae83 to c40b0b602822 (1 revision) (flutter/flutter#157896) 2024-10-31 [email protected] Roll Flutter Engine from 9295eeb6d3ce to 090c33aeae83 (4 revisions) (flutter/flutter#157893) 2024-10-30 [email protected] Roll Flutter Engine from 2bd854e23b61 to 9295eeb6d3ce (5 revisions) (flutter/flutter#157882) 2024-10-30 [email protected] Adds a new helpful tool exit message for SocketExceptions thrown during mdns discovery (flutter/flutter#157638) 2024-10-30 [email protected] Fix `GlowingOverscrollIndicator` examples (flutter/flutter#155203) 2024-10-30 [email protected] Roll Flutter Engine from 906a7ad88052 to 2bd854e23b61 (1 revision) (flutter/flutter#157878) 2024-10-30 [email protected] Upgrade templates to AGP 8.7/Gradle 8.10.2 (flutter/flutter#157872) 2024-10-30 [email protected] Roll Flutter Engine from 57ed5d338e7e to 906a7ad88052 (13 revisions) (flutter/flutter#157875) 2024-10-30 [email protected] Update Material 3 `LinearProgressIndicator` for new visual style (flutter/flutter#154817) 2024-10-30 [email protected] Roll Flutter Engine from 999797a2f690 to 57ed5d338e7e (5 revisions) (flutter/flutter#157833) 2024-10-30 [email protected] Add hidden `--no-implicit-pubspec-resolution` flag for one stable release. (flutter/flutter#157635) 2024-10-30 [email protected] Roll Packages from dda8fe3 to 2a42664 (5 revisions) (flutter/flutter#157864) 2024-10-30 [email protected] Mention partial PRs in the contributing docs (flutter/flutter#157863) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

github-actions Bot added framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Sep 9, 2024

TahaTesser marked this pull request as ready for review September 9, 2024 14:23

TahaTesser requested a review from QuncCccccc September 9, 2024 14:23

QuncCccccc reviewed Sep 25, 2024

View reviewed changes

Piinks mentioned this pull request Sep 25, 2024

Bugfix: LinearProgressIndicator is referring to wrong color theme for the background color. #154470

Closed

TahaTesser requested a review from QuncCccccc September 26, 2024 14:47

QuncCccccc approved these changes Oct 1, 2024

View reviewed changes

QuncCccccc self-requested a review October 14, 2024 22:39

TahaTesser mentioned this pull request Oct 24, 2024

Introduce new Material 3 Slider shapes #152237

Merged

8 of 9 tasks

QuncCccccc reviewed Oct 28, 2024

View reviewed changes

github-actions Bot added the a: text input Entering text in a text field or keyboard related problems label Oct 29, 2024

TahaTesser removed the a: text input Entering text in a text field or keyboard related problems label Oct 29, 2024

Update Material 3 LinearProgressIndicator for new visual style

44473fb

github-actions Bot added the a: text input Entering text in a text field or keyboard related problems label Oct 29, 2024

TahaTesser removed the a: text input Entering text in a text field or keyboard related problems label Oct 29, 2024

TahaTesser requested a review from QuncCccccc October 29, 2024 16:02

QuncCccccc approved these changes Oct 30, 2024

View reviewed changes

Comment thread packages/flutter/lib/src/material/progress_indicator.dart Outdated

Comment thread packages/flutter/test/material/progress_indicator_test.dart Outdated

TahaTesser added 2 commits October 30, 2024 13:51

Address feedback

a1298c7

Update docs

acf7f37

justinmc added the autosubmit Merge PR when tree becomes green via auto submit App label Oct 30, 2024

auto-submit Bot merged commit b8dcb0c into flutter:master Oct 30, 2024

TahaTesser deleted the m3_linear_progress_indicator branch October 30, 2024 19:11

engine-flutter-autoroll mentioned this pull request Oct 31, 2024

Roll Flutter from fe71cadf1959 to 16622e67a051 (15 revisions) flutter/packages#7971

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Oct 31, 2024

b8dcb0c Update Material 3 LinearProgressIndicator for new visual st…

55bdf0c

…yle (flutter/flutter#154817)

engine-flutter-autoroll mentioned this pull request Oct 31, 2024

Roll Flutter from fe71cadf1959 to b01558c1cd70 (16 revisions) flutter/packages#7972

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Oct 31, 2024

b8dcb0c Update Material 3 LinearProgressIndicator for new visual st…

724e21b

…yle (flutter/flutter#154817)

engine-flutter-autoroll mentioned this pull request Oct 31, 2024

Roll Flutter from fe71cadf1959 to 0fe615343bd9 (18 revisions) flutter/packages#7973

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Oct 31, 2024

b8dcb0c Update Material 3 LinearProgressIndicator for new visual st…

c16cf5e

…yle (flutter/flutter#154817)

engine-flutter-autoroll mentioned this pull request Oct 31, 2024

Manual roll Flutter from fe71cadf1959 to 0fe615343bd9 (18 revisions) flutter/packages#7989

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Oct 31, 2024

b8dcb0c Update Material 3 LinearProgressIndicator for new visual st…

80d985d

…yle (flutter/flutter#154817)

Piinks mentioned this pull request Nov 8, 2024

Flutter Framework Team: Notable Commits #121415

Closed

TahaTesser changed the title ~~Update Material 3 LinearProgressIndicator for new visual style~~ Update Material 3 LinearProgressIndicator for new visual style Nov 13, 2024

TahaTesser mentioned this pull request Nov 14, 2024

Migration Guide for Updated Material 3 Progress Indicators flutter/website#11396

Merged

4 tasks done

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 12, 2025

b8dcb0c Update Material 3 LinearProgressIndicator for new visual st…

b98af3d

…yle (flutter/flutter#154817)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025

b8dcb0c Update Material 3 LinearProgressIndicator for new visual st…

62fb10f

…yle (flutter/flutter#154817)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025

b8dcb0c Update Material 3 LinearProgressIndicator for new visual st…

035c346

…yle (flutter/flutter#154817)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 6, 2025

b8dcb0c Update Material 3 LinearProgressIndicator for new visual st…

24052fc

…yle (flutter/flutter#154817)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 7, 2025

b8dcb0c Update Material 3 LinearProgressIndicator for new visual st…

75860f1

…yle (flutter/flutter#154817)

qeepcologne mentioned this pull request Sep 14, 2026

[material_ui] Default year2023 to false for Slider, RangeSlider and the progress indicators #192729

Open

Conversation

TahaTesser commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code sample

Preview

Pre-launch Checklist

Uh oh!

QuncCccccc commented Sep 12, 2024

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TahaTesser commented Sep 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

QuncCccccc commented Oct 1, 2024

Uh oh!

TahaTesser commented Oct 1, 2024

Uh oh!

QuncCccccc commented Oct 1, 2024

Uh oh!

TahaTesser commented Oct 8, 2024

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

QuncCccccc Oct 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TahaTesser Oct 29, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Oct 29, 2024

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Oct 30, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Oct 30, 2024

Choose a reason for hiding this comment

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

justinmc commented Oct 30, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

TahaTesser commented Sep 9, 2024 •

edited

Loading

TahaTesser commented Sep 27, 2024 •

edited

Loading

QuncCccccc Oct 28, 2024 •

edited

Loading

TahaTesser Oct 30, 2024 •

edited

Loading