[dynamic_color] Add tone-based colors to color scheme #599
Conversation
|
I'm trying to use this, but I get this error: |
|
Interesting...I don't think I've changed anything related to that. Does the latest main branch work fine for you? |
Well, from pub it doesn't have the correct colours, but no errors. I switched the pubspec to use this fork, and boom: error. I'll try main asap. |
Latest main works fine. Just this branch :) |
|
I'm using DynamicColorBuilder ofc. |
|
Which flutter version are you using? |
|
|
Ok, I think I see the problem. Support for arbitrary colour tones were added in material_color_utilities 0.11.0, but stable flutter depends on 0.8.0. I just realised I was using the beta channel, which is why I didn't run into it. I think the solution will be to sidestep material_color_utilities and try to get the colours from the native side for the API < 34 case as well. |
|
Oh, I see, thanks! |
|
I've taken a different approach of implementing logic to "guess" tones that are missing from the common tones list, based on the implementation in material_color_utilities. This will be needed until flutter supports the new version. @Henry-Hiles Can you confirm if this works for you now? |
|
Sure, I'll test right now! |
|
While this no longer has an error, it still has the same issues as without this PR (very similar colors so nothing looks correct) |
|
|
|
As you can see, the navbar and background are the same, which isn't normal. |
|
I can't seem to reproduce that. Do you have an example repo/code you can share?
|
Hmm it happened when I upgraded to 3.22.2, I'll see if I can make a test repo. |
|
Nevermind deleting pub cache and re-getting fixed it! Thank you for this! |
|
After building my application using it, the primary color isn't accurate |
|
Which android version are you using? |
|
Android 14. I could give the project to you try it out seeing what's wrong |
|
@resucutie Thanks, I'll take a look. Could you also share your flutter version please? |
|
From what I can see this is working as expected; Android's quick settings tiles use a slightly different shade of the primary colour. You can see here that the |
|
Welp, what about in comparasion to other apps? It looks odd, or I guess it is the consensus here, like if it is using the wrong color shade, but I am not sure |
|
Do you mean you are seeing different colours compared to other apps using the same dynamic colour scheme? This implementation should be using the same colours as those used by the official native material library. If this is not the case, please share a repro. |
|
I've (finally) tested it and apparently it indeed take the correct colors. It is a bit odd that it looks different on an emulator
PR is good I think |
|
in our case, after activating dynamic colors (using this commit): look at the cards (list a/b and the new list fab. they should be different colors but with dynamic colors they become the same) without dynamic colors (correct)
with dynamic colors (wrong)
|
|
Please can you share your flutter and android versions, device information, debug logs and a link to a code repo if possible. |
|
thanks for the quick reply! here: testing on a real phone, i can provide a repro next week... it's very vanilla use of material components tho, not many customizations |
|
this is the oneplus color settings: |
|
ok these impact how colors are shown in the app: but the difference between primary container e secondary container remains basically non-existent |
|
@hasali19 what would be the best way to ignore completely oneplus color presets, just get the "main accent color" from android and utilize that color to build a correct material 3 color palette? |
|
Thanks for the info. Given that you are using Android 14 where the colours are retrieved directly from the system without any conversion, it is likely OnePlus is simply reporting both colours as the same. One thing you could try is to force use of the fallback method used for older versions of Android, e.g: final corePalette = await DynamicColorPlugin.getCorePalette();
final lightDynamic = corePalette?.toColorScheme(brightness: Brightness.light);
final darkDynamic = corePalette?.toColorScheme(brightness: Brightness.dark);If you just want a specific "accent" colour, you can pick one from the fields on the colour schemes provided by |
|
update final corePalette = await DynamicColorPlugin.getCorePalette();
final lightDynamic = corePalette?.toColorScheme(brightness: Brightness.light);
final darkDynamic = corePalette?.toColorScheme(brightness: Brightness.dark);doesn't fix the issue my colleague tested with his Pixel 7 Pro (and also inside an emulator) and he has the same issue the issue seems to be present only in light mode tho (and our theme settings don't have any special settings for only one of the modes): wrong in light mode
correct in dark mode
|
|
this is the card (the one with the text this is the fab: and this is the theme config: |
|
Although it's subtle, the colours in your screenshot do appear to be slightly different. I'm also able to reproduce very similar looking colours in light mode when running in an emulator.
|
|
yeah i was just about to write it! they are a little different... so it's more of a general issue with the way the m3 color generator works? |
|
with a green wallpaper the difference is less subtle too...
|
|
Right, I guess it's just an artifact of whatever algorithm Android uses to pick the system colours. |
|
well to be fair the material theme builder shows it as well with the blues (tho the difference is a little more visible): while with the greens the difference is much less subtle: @guidezpl is it supposed to be that different between hues? |
While `surfaceVariant` has been deprecated in favor of `surfaceContainerHighest`, the `dynamic_color` package does not yet support it, leading to an incorrect palette. Ignoring the deprecation warnings while waiting for material-foundation/flutter-packages#599.
|
It seems like the card color is incorrect... Is it just me or...? Not just the card color, but also the bottom nav bar and many other colors seem to be washed off (see, the one on the left is way more purple)
|
|
Given that nobody appears to be maintaining this repo, I have published my fork to pub.dev as dynamic_system_colors. |
|
Hi, this repo is maintained sporadically when I have time, but also it is summer and I am on vacation :) please be patient and I will review when back |
| ColorScheme _toLightColorScheme(CorePalette corePalette) { | ||
| return ColorScheme( | ||
| brightness: Brightness.light, | ||
| primary: Color(corePalette.primary.get(40)), |
There was a problem hiding this comment.
Unfortunately, these values only work for one type of scheme, there are many types. See https://github.com/material-foundation/material-color-utilities/blob/main/dev_guide/creating_color_scheme.md
| } | ||
|
|
||
| // This logic is taken from material_color_utilities 0.12 - https://github.com/material-foundation/material-color-utilities/blob/be615fc90286787bbe0c04ef58a6987e0e8fdc29/dart/lib/palettes/tonal_palette.dart#L93C5-L111. | ||
| // Once flutter updates to the latest version, this workaround can be removed. |
There was a problem hiding this comment.
Best to wait for flutter/flutter#170000 rather than introduce workarounds IMO
| ); | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
This is somewhat fragile an difficult to validate correctness with DynamicColorPlugin.kt
| @RequiresApi(Build.VERSION_CODES.UPSIDE_DOWN_CAKE) | ||
| private fun getColorScheme(resources: Resources): IntArray { | ||
| return intArrayOf( | ||
| // light |
There was a problem hiding this comment.
Why not obtain system_palette_key_color_primary_light and other key colors and generate the scheme directly?
|
To anyone on this PR with issues, please create a new separate issue if appropriate, or refer to an existing one, it's really hard to follow the discussion here |
Description
Adds the new tone-based colors from Flutter 3.22 to the color scheme.
On API >= 34, the color values are retrieved directly from the Android OS.
On API >= 31, the existing core palette will continue to be used, with the mappings taken from https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md.
Issues
Fixes #574, #582
Checklist
CHANGELOG.md