如何将Material设计颜色调色板转换为Flutter主题？

Question

我可以使用https://material.io/tools/color生成吸引人的配色方案，结果是一组包含八种颜色的集合。

不幸的是，ThemeData使得仅从这八个值构建主题变得困难。有一个构造函数可以为缺失的参数推导出合理的默认值，但它并不能从主要和次要颜色推导出所有内容。

我是否遗漏了什么？是否有任何Flutter工具可以将材料调色板转换为材料主题？

- Duncan Jones

---

有人已经得到答案了吗？由于Flutter的命名不同，我遇到了问题。 - Hari Anugrah

我很惊讶在https://material.io/tools/color上没有专门的方法来做到这一点。它只支持iOS和Android，分别导出为.swift或xml文件。 - Hugo Pretorius

发现了同样的问题，距离@Duncan最初的电子邮件已经过去了1年。material.io/tools/color没有flutter等效主题生成器。这里有人找到了替代方案吗？我找到了这个，但还没有尝试过：https://flutterawesome.com/flutter-material-theme-editor/ - Beezer

Answer 1

是的，在Flutter中，您可以使用MaterialColor来获取不同颜色深度，例如Colors.blue[300]。

尽管ThemeData按其构造函数接受Color对象，但您可以使用MaterialColor来获取不同颜色深度，例如Colors.blue[300]，因为它是从Color继承而来：

(Color -> ColorSwatch -> MaterialColor)

建议：
您不应该直接在ThemeData或任何需要Color的地方使用它，因为有时编译器在构建时会出现问题，并显示红色错误屏幕（我个人遇到过这个问题）。

例如：

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

这个问题的正确解决方案是：

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

- Nitesh