Skip to content

Commit 1686fa7

Browse files
authored
Update Material 3 CircularProgressIndicator for new visual style (#158104)
Related [Update both `ProgressIndicator` for Material 3 redesign](flutter/flutter#141340) Fixes [Issue: Cannot theme progress indicators, many properties missing](flutter/flutter#131690) Fixes [Cannot override default `CircularProgressIndicator` size](flutter/flutter#158106) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart 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> { @OverRide Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( // progressIndicatorTheme: const ProgressIndicatorThemeData( // constraints: BoxConstraints.tightFor(width: 100, height: 100), // strokeWidth: 12 // ), ), home: Scaffold( appBar: AppBar(title: const Text('CircularProgressIndicator')), body: const Center( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ CircularProgressIndicator(year2023: false, value: 0.5), CircularProgressIndicator(year2023: false), ], ), ), ), ); } } ``` </details> ### Preview <img width="579" alt="Screenshot 2024-11-04 at 16 01 57" src="https://github.com/user-attachments/assets/d27768c6-5570-48d0-9eed-565e02be8041"> ### New custom `CircularProgressIndicator.constraints` and stroke width <img width="579" alt="Screenshot 2024-11-04 at 16 02 40" src="https://github.com/user-attachments/assets/c67c4a31-58f4-4f82-bfb6-f1b78a000bac"> ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] 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. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
1 parent a1c7a0d commit 1686fa7

File tree

5 files changed

+607
-60
lines changed

5 files changed

+607
-60
lines changed

dev/tools/gen_defaults/lib/progress_indicator_template.dart

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,32 @@ class ProgressIndicatorTemplate extends TokenTemplate {
1212
@override
1313
String generate() => '''
1414
class _Circular${blockName}DefaultsM3 extends ProgressIndicatorThemeData {
15-
_Circular${blockName}DefaultsM3(this.context);
15+
_Circular${blockName}DefaultsM3(this.context, { required this.indeterminate });
1616
1717
final BuildContext context;
1818
late final ColorScheme _colors = Theme.of(context).colorScheme;
19+
final bool indeterminate;
1920
2021
@override
2122
Color get color => ${componentColor('md.comp.progress-indicator.active-indicator')};
2223
2324
@override
24-
Color get circularTrackColor => ${componentColor('md.comp.progress-indicator.track')};
25+
Color? get circularTrackColor => indeterminate ? null : ${componentColor('md.comp.progress-indicator.track')};
26+
27+
@override
28+
double get strokeWidth => ${getToken('md.comp.progress-indicator.track.thickness')};
29+
30+
@override
31+
double? get strokeAlign => CircularProgressIndicator.strokeAlignInside;
32+
33+
@override
34+
BoxConstraints get constraints => const BoxConstraints(
35+
minWidth: 48.0,
36+
minHeight: 48.0,
37+
);
38+
39+
@override
40+
double? get trackGap => ${getToken('md.comp.progress-indicator.active-indicator-track-space')};
2541
}
2642
2743
class _Linear${blockName}DefaultsM3 extends ProgressIndicatorThemeData {

0 commit comments

Comments
 (0)