Member-only story
Google Flutter Material Design 3 Migration Puzzles
The real juicy best practices puzzles are where code and design collide. And, migrating Flutter Themes to Material Design 3 is no exception to being fully of juicy best practices puzzles.
In the first part, I am going to show how I use the material color utilities package to map the new MD3 Colors back into the Material ColorSchemes. In the second part, I will cover one of the best practice puzzles involving Material Design Three. As when I was playing around with the Material Design # Web Themebuilder I noticed a problem that directly relates to the puzzle of what colors to use for text in Material Design 3.
Using Material Color Utilities
Material Color Utilities does not have many examples. The gist is that MD3 is based around a new color space called Hue, Chroma, and Tone, i.e. HCT. It takes the dominant color in an image such as this:
