An Important Material Design UX Use Case Not In Flutter Docs

Semantic Colors in Material Design 3 terminology is the extra color roles that we assign to screen specific areas to aid in polishing the UX contrast and semantic meaning wise in our Flutter Apps. But, with the addition of the new HCT color space and ThemeData extensions, the Flutter Docs does not cover how we would implement this UX use case. So let me show you.

To understand the underlying issues of this UX use case, we need to delve into the differences between OS platforms, specifically high contrast.

Platforms That Have Distinct High Contrast

1. MacOS

2. Linux

3. Microsoft Windows

Platforms That Do Not Have Distinct High Contrast

1. Android

2. Web

In fact due to the amount of Flutter platform targets and Flutter moving towards adaptive constructor methods to handle platform differences is why we have four theme slots in the MaterialApp widget.

In my UX decision choices, I have chosen to give the user the choice of all four themes on all Flutter target platforms. While this simplify some things it still presents the DevOPS problem of how to deliver semantic colors via ThemeData extensions as with normal…