How to convert material color palette to Flutter theme?

Viewed 1471

I can use https://material.io/tools/color to generate attractive color palettes. The result is a set of eight colors.

Unfortunately, the ThemeData makes it difficult to build a theme from these eight values alone. There is a constructor that promises to derive sensible default values for missing arguments, however it doesn't derive everything from the primary and secondary colors.

Am I missing something here? Are there any Flutter tools for converting a material palette into a material theme?

1 Answers

Yes, In flutter, you can use MaterialColor for different color shades like Colors.blue[300].

Though ThemeData accepts Color Object as per its constructor but you can use MaterialColor with different color shades like Colors.blue[300] since its inherited from Color:

(Color -> ColorSwatch -> MaterialColor)

Recommendations:
you should not use it directly in ThemeData or anyplace where Color is needed since sometimes while building compiler raises the issue with a glitch of red error screen (I personally faced this issue).

For example:

final AppTheme = ThemeData(
    primarySwatch: Colors.blue[300],  //<- Not recommended
    );

The right solution to this issue is :

final AppTheme = ThemeData(
        primarySwatch: Colors.blue.shade300,  //<- recommended
        );
Related