flutter
Make `ColorScheme` on the color palette page configurable
This PR is to add support for configurable ColorScheme in Material 3 demo. This is still a draft because I need to talk with our UX designer @Nancyhu2023 to see if this looks okay. If everything is good, I will duplicate the change to the M3 demo in the root directory:)
Fixes https://github.com/flutter/flutter/issues/138274
https://github.com/flutter/samples/assets/36861262/6b2eb2b7-5000-4335-b1d9-244a61810b9d
CC: @leighajarett
Pre-launch Checklist
- [x] I read the [Flutter Style Guide] recently, and have followed its advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [ ] I updated/added relevant documentation (doc comments with
///). - [ ] All existing and new tests are passing.
Thank you for working on this!! My only worry is that people might be playing around with the different colors and want to see a live preview of how the components look. WDYT @khanhnwin?
Thank you for working on this!! My only worry is that people might be playing around with the different colors and want to see a live preview of how the components look. WDYT @khanhnwin?
After we create a customized color scheme and go back to the first screen, we can see the components with the color scheme's change. Is this what you are looking for:) ?
I'm saying that it's a bit of a poor user experience to update a color on one screen, and then go back to the component screen to see the changes reflected. I would expect that someone using this to create a customized theme would need to do some iteration so going back and forth between different pages isn't ideal
Hi Leigha,
I agree with you that letting the user go back and forth is not an ideal solution. I have chatted with Qun, and gave her a better approach. I suggest iterating the existing color tool at the bottom of the left nav. Elevate the pop up(after click) to a bottom sheet as the place to host more controller/or input of color change. This way, the user can still see the components and their changes. More improvement that we can do after this step is to explicitly label the changes on the components, so user don't have to look for changes.
@Qun Cheng @.***> mind share the quick drawing photo you took yesterday?
Best, Nancy
On Wed, Dec 13, 2023 at 6:22 AM Leigha Jarett @.***> wrote:
I'm saying that it's a bit of a poor user experience to update a color on one screen, and then go back to the component screen to see the changes reflected. I would expect that someone using this to create a customized theme would need to do some iteration so going back and forth between different pages isn't ideal
— Reply to this email directly, view it on GitHub https://github.com/flutter/samples/pull/2113#issuecomment-1854008955, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6FGKLLAM3TM6A3KF2I2VKDYJG2Z5AVCNFSM6AAAAABAQ4R5Q2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNJUGAYDQOJVGU . You are receiving this because you were mentioned.Message ID: @.***>
Ah I see. Yes, we can show the components and the color schemes in one page.
Here's the picture I took @Nancyhu2023:)
I made a proof of concept like this:
WDYT @Nancyhu2023?
I can link a draft PR also
https://github.com/flutter/samples/pull/2115
https://github.com/flutter/samples/assets/21065911/5092afd1-9582-4291-8b45-98b74957e781
Wow, y'all this looks awesome! Making the ColorScheme configurable in this sample is a dream come true @QuncCccccc!!
I agree that we should probably try to have the color picker on the same page as the components. so that we can see the color changes reflect live. I like the additions from @leighajarett's prototype. From a usability perspective, It might be helpful to make the swatches a bit larger as circles instead so they're easier to click?
Both prototypes are super cool! I'm also a bit concerned about the accessibility of the swatch sizes and how it will be accessed in the narrower layouts?
Perhaps always being a popup or bottom sheet (as Nancy suggested) would be more flexible as it would allow for larger touch targets and only add its entries to the focus tree when open.
Here's my first go at building on top of Leigha's prototype! I'm a fan of Nancy's bottom sheet idea as well, I think both would integrate well!
Just implemented the "bottom sheet" idea. The code currently is super messy and so there's some latency when I drag the color thumb on the color picker. If this looks okay, I will reorganize the code to fix that:) Just want to show the general idea.
https://github.com/flutter/samples/assets/36861262/f6c19fb7-3be0-493f-9fac-ce101ca83426
That looks good! Is there a way to reduce the opacity of the overlay colored behind the bottom sheet to make the components more visibile?
One thing that I also liked about mine / Khanh's approach is that we added an explanation of what the colors actually represent - which I think would be super helpful. It's kind of overwhelming just seeing a ton of color options and the order they're shown isn't really reflective of how widely they're used in the actual components.
@QuncCccccc That looks so good!
What do y'all think about having that bottom sheet pop out as a "drawer" from the right hand side? I'm thinking on most screens, vertical real-estate is more limited than horizontal. It could sort of sit "on top" to the side so that we don't have to gray out the components section to distinguish between the active layers? I'm thinking a Photoshop/Figma-style UI where specific tooling is on the side. Happy to open a PR for this idea too, just wanted to put the idea out there!
Here's a quick mockup with my previous screenshot!
Thanks @leighajarett and @khanhnwin a lot for your advice :)! They all sound good to me! So to summarize:
- we can move this bottom sheet to be a "side sheet" like a drawer.
- make sure when the drawer pops up, the components section should still be 100% visible instead of being greyed out.
- reorganize the color roles like accents, on-accents and etc.
Questions:
- when we reorganize these color roles, do we still want to leave the primary, secondary... these role names? Developers might be more familiar with these names in
ColorScheme(I guess? Sorry if I'm totally wrong😆) - is there a preferred place for a color picker? I currently put it in bottom sheet so it will make components wtill visible when we are dragging the color thumb.
Happy to work on this! But if anyone has a PR already, I can review it👍!
Np @QuncCccccc!! All those notes sgtm. Thanks for adding all of this to the m3 sample! Tbh, I don't have any presentable code at the moment but here's as far as I got poking at Leigha's sample code between meetings: https://github.com/flutter/samples/tree/khanh_m3_demo Just stuck a Stack on top of the existing screen which isn't super elegant 😅 I should have more time to help out on this next week.
My take on your questions:
when we reorganize these color roles, do we still want to leave the primary, secondary... these role names? Developers might be more familiar with these names in ColorScheme(I guess? Sorry if I'm totally wrong😆) I believe so, or perhaps have it pop up as a tooltip as you hover over it?
is there a preferred place for a color picker? If we go with the side sheet format, could we have it above the color swatches so that it's always present? Basically what you're already doing with the Bottom Sheet!
Oh yeah I like that @khanhnwin!
- For the color role names, I think we can have them as tooltips like Khanh suggested, or perhaps have them appear near the colorpicker when they're selected
- Also agree with Khanh suggesting that the color picker can go on the bottom similar to your approach @QuncCccccc
Is this shaping up for landing, or should I close it out?
Still in progress. Would like to come back to work on this and provide a update with new ColorSchee roles once https://github.com/flutter/flutter/pull/138521 is landed.
I will close this for now because I probably won't have much time working on this. Will come back to this issue and also apply the latest ColorScheme change to M3 demo.