Member-only story
Abusing Flutter 3 Material Design 3 Shadows For Awesome Design
What I will suggest, is radical in that I am replacing the Elevation Overlay with a simulation. But, there is a design purpose to this.
## Material Design 3 Shadows
So why do this as far as design-wise? Well, to see let’s compute shadow color in the HCT colorspace for Material Design 3:
shadow: palette.neutral.get(0),
That is how it’s compute in the HCT space for the Scheme class before we translate it to ColorScheme specifics. And, that reads take the palette neutral color role at the tint-zero position. What is the color? It’s the blackest of the neutral of whatever we have chosen for our brand colors in our logo.
A while back when dark mode was first implement in the Flutter SDK, the Google Flutter team stated that they were working on elevation shadows for dark mode as at the time setting to dark did not make sense in dark mode.
Well, it’s 2022, and we still do not have a fix! My solution involves turning off elevation shadows via setting ColorScheme shadow color to transparency and re-using the shadows list array that underlies the Elevation Overlay.
Let me show you.
