Skip to content

Conversation

@Hixie
Copy link
Contributor

@Hixie Hixie commented Mar 7, 2024

Fixes #144649

This PR is to add an enhancement for ColorScheme.fromSeed(). When we input a brighter color with a high chroma and we want the resulting ColorScheme respects the source color, we can achieve this by setting

ColorScheme.fromSeed(
  seedColor: sourceColor,
  dynamicSchemeVariant: DynamicSchemeVariant.fidelity,
  ...
)

Here is a demo for ColorScheme constructed by all 9 variants:
Screenshot 2024-03-13 at 4 33 02 PM
Screenshot 2024-03-13 at 4 33 07 PM

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Mar 7, 2024
Copy link
Contributor

@QuncCccccc QuncCccccc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think if adding a flag to enable color fidelity can be a good idea? Like:

factory ColorScheme.fromSeed({
    required Color seedColor,
    ...
    bool applyColorFidelity = false,
    ...
}) {

    final DynamicScheme scheme;
    if (applyColorFidelity) {
      scheme = switch (brightness) {
        Brightness.light => SchemeFidelity(sourceColorHct: Hct.fromInt(seedColor.value), isDark: false, contrastLevel: 0.0),
        Brightness.dark => SchemeFidelity(sourceColorHct: Hct.fromInt(seedColor.value), isDark: true, contrastLevel: 0.0),
      };
    } else {
      scheme = switch (brightness) {
        Brightness.light => SchemeTonalSpot(sourceColorHct: Hct.fromInt(seedColor.value), isDark: false, contrastLevel: 0.0),
        Brightness.dark => SchemeTonalSpot(sourceColorHct: Hct.fromInt(seedColor.value), isDark: true, contrastLevel: 0.0),
      };
    }
 return ColorScheme(...);
}

@Hixie
Copy link
Contributor Author

Hixie commented Mar 8, 2024

We could. I mostly went with a method because:

  • it's more likely to lead to tree shaking (it's easier to tell that a method isn't used at all, than that a method's argument happens to always be a constant value; I don't know how clever Dart's tree shaker is here though, and I don't know how many bytes the two algorithms drag in, so I don't know if this really matters).
  • a boolean is harder to extend (what happens when we want to add a third algorithm)
  • the code looks slightly cleaner at the call site if it's a method than an optional boolean.

These aren't particularly strong reasons though so if you'd prefer the argument version I'm happy to go with that.

@QuncCccccc
Copy link
Contributor

We could. I mostly went with a method because:

  • it's more likely to lead to tree shaking (it's easier to tell that a method isn't used at all, than that a method's argument happens to always be a constant value; I don't know how clever Dart's tree shaker is here though, and I don't know how many bytes the two algorithms drag in, so I don't know if this really matters).
  • a boolean is harder to extend (what happens when we want to add a third algorithm)
  • the code looks slightly cleaner at the call site if it's a method than an optional boolean.

These aren't particularly strong reasons though so if you'd prefer the argument version I'm happy to go with that.

I see! Creating another method sounds good to me! Since there are a lot of code duplication (and also .fromImageProvider), I think maybe we can create a private method to convert the DynamicScheme to ColorScheme. Do you mind if I push a commit for the fix?

@Hixie
Copy link
Contributor Author

Hixie commented Mar 8, 2024

I'm not familiar enough with the underlying library to say what the impact on code size / tree shaking will be. I have no strong opinions on how this code should work so I'm happy to hand off the PR to you if you want to run with it. :-)

@QuncCccccc
Copy link
Contributor

I'm not familiar enough with the underlying library to say what the impact on code size / tree shaking will be. I have no strong opinions on how this code should work so I'm happy to hand off the PR to you if you want to run with it. :-)

Sounds good! Will finish this one soon. Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

trivial nit: extraneous blank line

@pennzht
Copy link
Member

pennzht commented Mar 12, 2024

Hi! I'm a maintainer of Material Color Utilities, the library behind dynamic color schemes.

My personal suggestion is to add a method similar to

ColorScheme.fromSeed({
  required Color seedColor,
  Brightness brightness = Brightness.light,
  Variant variant = Variant.tonalSpot,
})

where Variant is an enum defined in variant.dart

This would allow the user to create a color scheme from one of nine variants, each with some different behavior. tonalSpot is the baseline; fidelity adjusts tone of colors to reach chroma; vibrant is colorful; and so on.

I'm unfamiliar with the details of tree shaking in Dart, but my intuition is — There shouldn't be a huge difference whether we defined multiple methods (one for each variant) or a single method that takes a variant as a parameter. Most of the color solving happens in DynamicColor.getTone and MaterialDynamicColors, which are required to generate colors for any variant; each variant is also defined in a very short piece of code (such as SchemeVibrant).

@QuncCccccc
Copy link
Contributor

Hi! I'm a maintainer of Material Color Utilities, the library behind dynamic color schemes.

My personal suggestion is to add a method similar to

ColorScheme.fromSeed({
  required Color seedColor,
  Brightness brightness = Brightness.light,
  Variant variant = Variant.tonalSpot,
})

where Variant is an enum defined in variant.dart

This would allow the user to create a color scheme from one of nine variants, each with some different behavior. tonalSpot is the baseline; fidelity adjusts tone of colors to reach chroma; vibrant is colorful; and so on.

I'm unfamiliar with the details of tree shaking in Dart, but my intuition is — There shouldn't be a huge difference whether we defined multiple methods (one for each variant) or a single method that takes a variant as a parameter. Most of the color solving happens in DynamicColor.getTone and MaterialDynamicColors, which are required to generate colors for any variant; each variant is also defined in a very short piece of code (such as SchemeVibrant).

Hi @pennzht! Thanks so much for your suggestions! Yeah, adding an enum parameter for variants also sounds good to me:) I can update this PR then.

@QuncCccccc QuncCccccc changed the title Add ColorScheme.fromFidelitySeed Enhance ColorScheme.fromSeed with a new variant parameter Mar 12, 2024
@github-actions github-actions bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Mar 12, 2024
@QuncCccccc QuncCccccc requested a review from HansMuller March 12, 2024 21:30
@QuncCccccc QuncCccccc force-pushed the colorScheme branch 2 times, most recently from 04c1dc1 to f8deea2 Compare March 14, 2024 23:14
@QuncCccccc QuncCccccc requested a review from HansMuller March 19, 2024 17:56
parlough added a commit to flutter/website that referenced this pull request Mar 27, 2024
This PR is to add a breaking change page for the recent ColorScheme
change(flutter/flutter#142654,
flutter/flutter#144273 and
flutter/flutter#144805).

---------

Co-authored-by: Parker Lougheed <[email protected]>
Co-authored-by: Shams Zakhour (ignore Sfshaza) <[email protected]>
Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This all looks good; just some small-time feedback about API doc text.

Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@QuncCccccc
Copy link
Contributor

The material color utilities package has exported scheme_fruit_salad.dart and scheme_rainbow.dart after 0.9.0 but currently flutter is still using 0.8.0 so we need to explicitly import these two here. The PR #145959 updates the dependency's version and after it's merged, the Google testing failure in this PR should also be fixed.

auto-submit bot pushed a commit that referenced this pull request Apr 3, 2024
…5959)

This PR is to update material_color_utilities package version to the latest. `material_color_utilities/scheme/scheme_fruit_salad.dart` and `material_color_utilities/scheme/scheme_rainbow.dart` are exported after version 0.9.0.

Once this PR is merged, we don't need to explicitly import these two files like the change in PR #144805, which breaks some dependencies in `Google testing`.
@QuncCccccc QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 3, 2024
@auto-submit auto-submit bot merged commit 950ec1c into flutter:master Apr 3, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 3, 2024
auto-submit bot pushed a commit to flutter/packages that referenced this pull request Apr 3, 2024
Roll Flutter from a418568 to e868e2b (34 revisions)

flutter/flutter@a418568...e868e2b

2024-04-03 [email protected] Add SegmentedButton expand feature (flutter/flutter#142804)
2024-04-03 [email protected] Roll Flutter Engine from e36b9b10c36f to 56fa2c33a5f7 (1 revision) (flutter/flutter#146205)
2024-04-03 [email protected] Roll Packages from 83f3842 to 0e848fa (3 revisions) (flutter/flutter#146201)
2024-04-03 [email protected] Enhance ColorScheme.fromSeed with a new `variant` parameter (flutter/flutter#144805)
2024-04-03 [email protected] Roll Flutter Engine from 0280de5be276 to e36b9b10c36f (1 revision) (flutter/flutter#146200)
2024-04-03 [email protected] Fix typos in bottom_sheet.dart (flutter/flutter#146188)
2024-04-03 [email protected] Roll Flutter Engine from 979030d81f8d to 0280de5be276 (2 revisions) (flutter/flutter#146199)
2024-04-03 [email protected] Roll Flutter Engine from bef3bbe3f74e to 979030d81f8d (1 revision) (flutter/flutter#146186)
2024-04-03 [email protected] Roll Flutter Engine from 5fc83bc24b2e to bef3bbe3f74e (1 revision) (flutter/flutter#146183)
2024-04-03 [email protected] Roll Flutter Engine from 0da1b2eb370a to 5fc83bc24b2e (1 revision) (flutter/flutter#146180)
2024-04-03 [email protected] Avoid calling `TextPainter.plainText` for simple static text (flutter/flutter#146084)
2024-04-03 [email protected] Roll Flutter Engine from e603f89844a9 to 0da1b2eb370a (2 revisions) (flutter/flutter#146179)
2024-04-03 [email protected] Roll Flutter Engine from ef60a95d78c1 to e603f89844a9 (3 revisions) (flutter/flutter#146177)
2024-04-03 [email protected] Fix chip baseline implementation (flutter/flutter#146162)
2024-04-03 [email protected] Roll Flutter Engine from bb4ec2d7eb39 to ef60a95d78c1 (1 revision) (flutter/flutter#146176)
2024-04-03 [email protected] Add tests for material_state_mouse_cursor.0.dart API example. (flutter/flutter#145987)
2024-04-03 [email protected] Update material_color_utilities package version to latest 0.11.1 (flutter/flutter#145959)
2024-04-03 [email protected] Roll Flutter Engine from 5f6dec8bd877 to bb4ec2d7eb39 (4 revisions) (flutter/flutter#146169)
2024-04-03 [email protected] Roll Flutter Engine from 5dbcfdc2a456 to 5f6dec8bd877 (1 revision) (flutter/flutter#146163)
2024-04-02 [email protected] Dispose FocusNode in tests. (flutter/flutter#146161)
2024-04-02 [email protected] Add `none` language strings to code blocks. (flutter/flutter#146154)
2024-04-02 [email protected] Refactor docs (flutter/flutter#145998)
2024-04-02 [email protected] Roll Flutter Engine from c60b00a20fc3 to 5dbcfdc2a456 (3 revisions) (flutter/flutter#146159)
2024-04-02 [email protected] Marks Linux_pixel_7pro complex_layout_scroll_perf_impeller__timeline_summary to be unflaky (flutter/flutter#140038)
2024-04-02 [email protected] Roll Flutter Engine from 5bf8b94505a4 to c60b00a20fc3 (2 revisions) (flutter/flutter#146157)
2024-04-02 [email protected] Refactor analyze (flutter/flutter#146138)
2024-04-02 [email protected] Implement SelectionArea triple click gestures (flutter/flutter#144563)
2024-04-02 [email protected] Roll Flutter Engine from 6883f7313da0 to 5bf8b94505a4 (2 revisions) (flutter/flutter#146152)
2024-04-02 [email protected] Fix border color is wrong for a focused and hovered TextField (flutter/flutter#146127)
2024-04-02 [email protected] Sync lints and enable `annotate_redeclares` (flutter/flutter#146144)
2024-04-02 [email protected] Implements `RenderBox.computeDryBaseline` for material render boxes (flutter/flutter#146027)
2024-04-02 [email protected] Roll Flutter Engine from 523fc953ebc8 to 6883f7313da0 (2 revisions) (flutter/flutter#146140)
2024-04-02 [email protected] Fix `MenuItemButton` overflow (flutter/flutter#143932)
2024-04-02 [email protected] Roll Packages from d5aff19 to 83f3842 (4 revisions) (flutter/flutter#146134)

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],[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

...
atsansone pushed a commit to atsansone/website that referenced this pull request Apr 5, 2024
This PR is to add a breaking change page for the recent ColorScheme
change(flutter/flutter#142654,
flutter/flutter#144273 and
flutter/flutter#144805).

---------

Co-authored-by: Parker Lougheed <[email protected]>
Co-authored-by: Shams Zakhour (ignore Sfshaza) <[email protected]>
TecHaxter pushed a commit to TecHaxter/flutter_packages that referenced this pull request May 22, 2024
Roll Flutter from a418568 to e868e2b (34 revisions)

flutter/flutter@a418568...e868e2b

2024-04-03 [email protected] Add SegmentedButton expand feature (flutter/flutter#142804)
2024-04-03 [email protected] Roll Flutter Engine from e36b9b10c36f to 56fa2c33a5f7 (1 revision) (flutter/flutter#146205)
2024-04-03 [email protected] Roll Packages from 83f3842 to 0e848fa (3 revisions) (flutter/flutter#146201)
2024-04-03 [email protected] Enhance ColorScheme.fromSeed with a new `variant` parameter (flutter/flutter#144805)
2024-04-03 [email protected] Roll Flutter Engine from 0280de5be276 to e36b9b10c36f (1 revision) (flutter/flutter#146200)
2024-04-03 [email protected] Fix typos in bottom_sheet.dart (flutter/flutter#146188)
2024-04-03 [email protected] Roll Flutter Engine from 979030d81f8d to 0280de5be276 (2 revisions) (flutter/flutter#146199)
2024-04-03 [email protected] Roll Flutter Engine from bef3bbe3f74e to 979030d81f8d (1 revision) (flutter/flutter#146186)
2024-04-03 [email protected] Roll Flutter Engine from 5fc83bc24b2e to bef3bbe3f74e (1 revision) (flutter/flutter#146183)
2024-04-03 [email protected] Roll Flutter Engine from 0da1b2eb370a to 5fc83bc24b2e (1 revision) (flutter/flutter#146180)
2024-04-03 [email protected] Avoid calling `TextPainter.plainText` for simple static text (flutter/flutter#146084)
2024-04-03 [email protected] Roll Flutter Engine from e603f89844a9 to 0da1b2eb370a (2 revisions) (flutter/flutter#146179)
2024-04-03 [email protected] Roll Flutter Engine from ef60a95d78c1 to e603f89844a9 (3 revisions) (flutter/flutter#146177)
2024-04-03 [email protected] Fix chip baseline implementation (flutter/flutter#146162)
2024-04-03 [email protected] Roll Flutter Engine from bb4ec2d7eb39 to ef60a95d78c1 (1 revision) (flutter/flutter#146176)
2024-04-03 [email protected] Add tests for material_state_mouse_cursor.0.dart API example. (flutter/flutter#145987)
2024-04-03 [email protected] Update material_color_utilities package version to latest 0.11.1 (flutter/flutter#145959)
2024-04-03 [email protected] Roll Flutter Engine from 5f6dec8bd877 to bb4ec2d7eb39 (4 revisions) (flutter/flutter#146169)
2024-04-03 [email protected] Roll Flutter Engine from 5dbcfdc2a456 to 5f6dec8bd877 (1 revision) (flutter/flutter#146163)
2024-04-02 [email protected] Dispose FocusNode in tests. (flutter/flutter#146161)
2024-04-02 [email protected] Add `none` language strings to code blocks. (flutter/flutter#146154)
2024-04-02 [email protected] Refactor docs (flutter/flutter#145998)
2024-04-02 [email protected] Roll Flutter Engine from c60b00a20fc3 to 5dbcfdc2a456 (3 revisions) (flutter/flutter#146159)
2024-04-02 [email protected] Marks Linux_pixel_7pro complex_layout_scroll_perf_impeller__timeline_summary to be unflaky (flutter/flutter#140038)
2024-04-02 [email protected] Roll Flutter Engine from 5bf8b94505a4 to c60b00a20fc3 (2 revisions) (flutter/flutter#146157)
2024-04-02 [email protected] Refactor analyze (flutter/flutter#146138)
2024-04-02 [email protected] Implement SelectionArea triple click gestures (flutter/flutter#144563)
2024-04-02 [email protected] Roll Flutter Engine from 6883f7313da0 to 5bf8b94505a4 (2 revisions) (flutter/flutter#146152)
2024-04-02 [email protected] Fix border color is wrong for a focused and hovered TextField (flutter/flutter#146127)
2024-04-02 [email protected] Sync lints and enable `annotate_redeclares` (flutter/flutter#146144)
2024-04-02 [email protected] Implements `RenderBox.computeDryBaseline` for material render boxes (flutter/flutter#146027)
2024-04-02 [email protected] Roll Flutter Engine from 523fc953ebc8 to 6883f7313da0 (2 revisions) (flutter/flutter#146140)
2024-04-02 [email protected] Fix `MenuItemButton` overflow (flutter/flutter#143932)
2024-04-02 [email protected] Roll Packages from d5aff19 to 83f3842 (4 revisions) (flutter/flutter#146134)

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],[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

...
@QuncCccccc QuncCccccc added the cp: stable cherry pick this pull request to stable release candidate branch label May 22, 2024
flutteractionsbot pushed a commit to flutteractionsbot/flutter that referenced this pull request May 22, 2024
…144805)

Fixes flutter#144649

This PR is to add an enhancement for `ColorScheme.fromSeed()`.  When we input a brighter color with a high chroma and we want the resulting `ColorScheme` respects the source color, we can achieve this by setting

```dart
ColorScheme.fromSeed(
  seedColor: sourceColor,
  variant: Variant.fidelity,
  ...
)
```

Here is a demo for `ColorScheme` constructed by all 9 variants:
![Screenshot 2024-03-13 at 4 33 02�PM](https://github.com/flutter/flutter/assets/36861262/2cdbe559-67ff-4f8b-bd48-ccff5131b949)
![Screenshot 2024-03-13 at 4 33 07�PM](https://github.com/flutter/flutter/assets/36861262/e6af2362-c501-499b-8880-06a321de91e6)
QuncCccccc added a commit to QuncCccccc/flutter that referenced this pull request May 22, 2024
…tter#145959)

This PR is to update material_color_utilities package version to the latest. `material_color_utilities/scheme/scheme_fruit_salad.dart` and `material_color_utilities/scheme/scheme_rainbow.dart` are exported after version 0.9.0.

Once this PR is merged, we don't need to explicitly import these two files like the change in PR flutter#144805, which breaks some dependencies in `Google testing`.
@QuncCccccc QuncCccccc mentioned this pull request May 31, 2024
2 tasks
rydmike added a commit to rydmike/website that referenced this pull request Oct 8, 2024
The following four links to reference pages on the Flutter web site page https://docs.flutter.dev/release/breaking-changes/new-color-scheme-roles are broken:

- [Support fidelity variant for ColorScheme.fromSeed](flutter/flutter#144649)
- [Introduce tone-based surfaces and accent color add-ons - Part 1](flutter/flutter#142654)
- [Introduce tone-based surfaces and accent color add-ons - Part 2](flutter/flutter#138521)
- [Enhance ColorScheme.fromSeed with a new variant parameter](flutter/flutter#144805)

They are broken due to wrong syntax in the markdown file, used URLs are otherwise correct, but the used extended markdown link syntax is not, causing the links to be broken.

This PR fixes the error so the links work.
sfshaza2 pushed a commit to flutter/website that referenced this pull request Oct 8, 2024
The following four links to reference pages on the Flutter web site page
https://docs.flutter.dev/release/breaking-changes/new-color-scheme-roles
are broken:

- [Support fidelity variant for
ColorScheme.fromSeed](flutter/flutter#144649)
- [Introduce tone-based surfaces and accent color add-ons - Part
1](flutter/flutter#142654)
- [Introduce tone-based surfaces and accent color add-ons - Part
2](flutter/flutter#138521)
- [Enhance ColorScheme.fromSeed with a new variant
parameter](flutter/flutter#144805)

They are broken due to wrong syntax in the markdown file, used URLs are
otherwise correct, but the used extended markdown link syntax is not,
causing the links to be broken.

This PR fixes the error so the links work.

## Presubmit checklist

- [ ] 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

autosubmit Merge PR when tree becomes green via auto submit App cp: stable cherry pick this pull request to stable release candidate branch d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Button colors generated from ColorScheme.fromSeed changed

4 participants