How to convert material color palette to Flutter theme?

4
votes

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
colorsflutterthemesmaterial-design
Anyone got the answer yet? I have problem since Flutter naming is different – Hari Anugrah
I am surprised there is no designed method to do this from material.io/tools/color. Only supports iOS and Android which exports in .swift or xml respectively. – Hugo Pretorius
Found the same issue and it is 1 year on from @Duncan's original email. The material.io/tools/color has no flutter equivalent theme generator. Anyone here found an alternative? I did find this but have not tried it yet: flutterawesome.com/flutter-material-theme-editor – Beezer

1 Answers

0
votes

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
        );