Repository navigation
Update elevation overlay to apply in both light and dark theme #91607
Description
Activity
Hi Rami, I would like to contribute to the Material 3 migration, but seems that there is no public official guideline to start working on it.
I see that some Google applications are starting to use it, so I guess there is a guideline but is still unpublished, is there a way to have access to it?Thanks!
Hey @MCarlomagno thanks for your interest in helping with Material 3! At the moment there is no public guidance but it will be published soon (in the next couple of weeks). At that time, we will have more of a concrete plan for how these updates will be brought to Flutter and should be able to accept your help then. Stay tuned!
Sounds good, thanks a lot for the info :)
- Reacted by Marcos Carlomagno
@rami-a on a related note.
I ran into some limitations when using more nuanced dark themes and the way the current elevation color is applied in the SDK by the
applyOverlayfunction.I proposed a fix for it here #90353 (comment) that would help. However, since I suspected that Material 3 would bring in some new features to this, I decided to wait and see what it brings. Also, I never got around to check if the fix would break any tests, it might not actually.
Looking at Material3 spec it looks like this will be interesting and certainly a new much more powerful and more nuanced way of handling it.
However, I don't think it will solve the issue I was having with the
applyOverlayfunction in Material2. So I think it would still be nice if that worked more as expected and was applied more generally toMaterialsurfaces by theapplyOverlayfunction, by recognizing color property values that may be used byMaterialin various widget, both viacolorSchemeproperties and the various legacyThemeDatabackground colors, while they still exist.Current issue with
applyOverlayon M2Materialusing widgetsThe current issue with
applyOverlayis that overlay color is only applied toMaterialthat happens to use a color value that is equal to thecolorScheme.surfacecolor value. Problems occur if you create dark themes where you have slightly nuanced differences on various background color properties, primarily then oncolorScheme.background.You might do so if you use eg slightly different
colorScheme.primarycolor alpha blend strength for yourcolorScheme.backgroundcolor, compared tocolorScheme.surface, then you get no elevation overlay applied in dark mode to Widgets that usecolorScheme.backgroundas their default background color.Actually most widgets still use the
ThemeDatacolorscardColororcanvasColor/backgroundColor, depending on what type ofMaterialthe widget is using or widget. Those color properties in return are set tocolorScheme.surfaceandcolorScheme.backgroundrespectively, byThemeData()factory orThemeData.from()factory.The
ThemeDatacolorscardColor,canvasColor,backgroundColoranddialogBackgroundColorare known deprecation targets, but it would still be nice and proper to included them while they still exist, so the experience is more in line what can be expected from elevation overlay color. Still, even just addingcolorScheme.backgroundto theapplyOverlayfunction, as a recognizedMaterialsurface color that should get elevation overlay in dark mode, when so configured, would go a long way.@rydmike you should collaborate on issue 91605 (I'm not even going to link it here).
Reacted by RydmikeWill this be opt in or every one will have that when it is available ? Just so I get a mental reminder there is a need to opt in.
Reacted by RydmikeThis change would be tied to the currently available
useMaterial3flag on ThemeData once it is implemented.Reacted by Rydmike- changed the title
[-][Material 3] Update elevation overlay to apply in both light and dark theme[/-][+]Update elevation overlay to apply in both light and dark theme[/+]on Mar 30, 2022 This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Apr 13, 2022
As part of Material 3, the elevation overlay is changing in a few ways (link to https://material.io spec to come soon)