flutter/dev/tools/gen_defaults/lib/progress_indicator_template.dart
Taha Tesser 1686fa7eb4
Update Material 3 CircularProgressIndicator for new visual style (#158104)
Related [Update both `ProgressIndicator` for Material 3
redesign](https://github.com/flutter/flutter/issues/141340)
Fixes [Issue: Cannot theme progress indicators, many properties
missing](https://github.com/flutter/flutter/issues/131690)
Fixes [Cannot override default `CircularProgressIndicator`
size](https://github.com/flutter/flutter/issues/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
2024-11-19 23:23:26 +00:00

72 lines
2.3 KiB
Dart

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'template.dart';
class ProgressIndicatorTemplate extends TokenTemplate {
const ProgressIndicatorTemplate(super.blockName, super.fileName, super.tokens, {
super.colorSchemePrefix = '_colors.',
});
@override
String generate() => '''
class _Circular${blockName}DefaultsM3 extends ProgressIndicatorThemeData {
_Circular${blockName}DefaultsM3(this.context, { required this.indeterminate });
final BuildContext context;
late final ColorScheme _colors = Theme.of(context).colorScheme;
final bool indeterminate;
@override
Color get color => ${componentColor('md.comp.progress-indicator.active-indicator')};
@override
Color? get circularTrackColor => indeterminate ? null : ${componentColor('md.comp.progress-indicator.track')};
@override
double get strokeWidth => ${getToken('md.comp.progress-indicator.track.thickness')};
@override
double? get strokeAlign => CircularProgressIndicator.strokeAlignInside;
@override
BoxConstraints get constraints => const BoxConstraints(
minWidth: 48.0,
minHeight: 48.0,
);
@override
double? get trackGap => ${getToken('md.comp.progress-indicator.active-indicator-track-space')};
}
class _Linear${blockName}DefaultsM3 extends ProgressIndicatorThemeData {
_Linear${blockName}DefaultsM3(this.context);
final BuildContext context;
late final ColorScheme _colors = Theme.of(context).colorScheme;
@override
Color get color => ${componentColor('md.comp.progress-indicator.active-indicator')};
@override
Color get linearTrackColor => ${componentColor('md.comp.progress-indicator.track')};
@override
double get linearMinHeight => ${getToken('md.comp.progress-indicator.track.thickness')};
@override
BorderRadius get borderRadius => BorderRadius.circular(${getToken('md.comp.progress-indicator.track.thickness')} / 2);
@override
Color get stopIndicatorColor => ${componentColor('md.comp.progress-indicator.stop-indicator')};
@override
double? get stopIndicatorRadius => ${getToken('md.comp.progress-indicator.stop-indicator.size')} / 2;
@override
double? get trackGap => ${getToken('md.comp.progress-indicator.active-indicator-track-space')};
}
''';
}