如何将材质调色板转换为 Flutter 主题？

Posted 2023-02-22

【中文标题】如何将材质调色板转换为 Flutter 主题？

【英文标题】：How to convert material color palette to Flutter theme?

【发布时间】：2019-05-22 11:03:48

【问题描述】：

我可以使用https://material.io/tools/color 生成有吸引力的调色板。结果是一组八种颜色。

不幸的是，ThemeData 使得仅从这八个值构建主题变得困难。 a constructor 承诺为缺少的参数派生合理的默认值，但它并没有从主要颜色和次要颜色派生所有内容。

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

【问题讨论】：

有人得到答案了吗？由于 Flutter 命名不同，我遇到了问题

我很惊讶material.io/tools/color 没有设计方法来做到这一点。仅支持分别以 .swift 或 xml 格式导出的 ios 和 android。

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

【参考方案1】：

是的，在颤振中，您可以将 MaterialColor 用于不同的色调，例如 Colors.blue[300]。

虽然 ThemeData 根据其 constructor 接受 Color 对象，但您可以使用具有不同颜色阴影的 MaterialColor，例如 Colors.blue[300] 因为它继承自 Color：

（颜色 -> ColorSwatch -> MaterialColor）

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

例如：

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

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

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