An UX Expert Way To Adapt To Material Design 3 Dynamic Color In Flutter Apps

Want to have some UX color fun? What hue value does black have in the MD3 color space? If you know the answer, you can use that knowledge to implement a color hack to adapt to dynamic color in flutter apps. Let me show you how.

Material Design 3 Color Space Tricks

So let’s hit this head on. What hue value does black have in the MD3 color space? Come on, even if you know only CMYK you already have a clue what the answer is as in CMYK black has an angle of zero. With black having a value of zero in the MD3 color space and the fact that the Material Color Utilities package Blend harmonize function only shifts hue of the design color.

So in each of the functions of our theme data function chain we accept a dynamic color input and only at the top function do we see if it is null and if so then assign black and treat that as the dynamic color input in each child function in the theme data function chain. So now let me step through the example, starting first where we define colors.

The Example

The UX stack I use to fill in all the holes in ThemeData is the Flex Color Scheme package: