[SOLVED] How to display colours of Material 3 in a meaningful way?

How to display colours of Material 3 in a meaningful way?

The theme builds itself with colorSchemeSeed, but I have no idea which colors go for which widgets and properties as they are all named confusingly.

There is no such proper website service yet to display a colorSchemeSeed with a meaningful understandable layout. So how can I get the colors currently that I need in a quick fashion? For instance I need the color generated for the subtitle in a Card widget in Material 3, how do I get the name of it to use in Theme.of(context)?

Solution

For now I recommend using Figma and the Material Theme Builder plugin. Figma is a Desktop application which allows all sorts of editing, and with it there are plugins; one of them is the Material Theme Builder by Google which allows you to pick a color and it generates the colours for you, displaying them.

To get any of the colorSchemeSeed colors, simply use this code:

Theme.of(context).colorScheme.findColorHere

Your IDE will autocomplete findColorHere to all the color variables like primaryContainer, etc.