是否有Flutter的“材料设计颜色"贴图? [英] Is there a map of Material design colors for Flutter?

问题描述

我有一个小部件，理想情况下，我希望使用基本的Material颜色并输出以该颜色的阴影为主题的小部件.例如:

I have a widget that I'd ideally like to take in a base Material color and output a widget themed with shades of that color. For example:

return new Container(
  color: Colors.pink.shade50,
  child: new Text(
    'hello',
    style: new TextStyle(
      color: Colors.pink.shade100,
    ),
  ),
);

需要我指定两种粉红色的阴影.理想情况下，我可以执行以下操作:

requires me to specify both shades of pink. Ideally, I could do something like:

Color color = getBaseColorForThisPage(); // returns something like Colors.pink, but on another page, it'll return something like Colors.purple
return new Container(
  color: color.shade50,
  child: new Text(
    'hello',
    style: new TextStyle(
      color: color.shade100,
    ),
  ),
);

是否有一种方法可以在调色板中返回材质"颜色的映射"，而不仅仅是单一颜色?当我查看IntelliJ中的自动完成功能时，我看到键入Colors.pink后，便可以指定阴影.但是如果我将颜色设置为变量，例如Color color = Colors.pink，后来我无法执行color.shade100或color[100].谢谢！

Is there a way to return a "map" of Material colors within a color palette, instead of just a single color? When I look at the autocomplete in IntelliJ, I see that after typing Colors.pink, I'm able to specify the shade. But if I set the color to a variable, e.g. Color color = Colors.pink, I am later not able to do color.shade100 or color[100]. Thanks!

推荐答案

MaterialColor扩展了

MaterialColor extends ColorSwatch which is kind of like a Map of colors. You can use ColorSwatch anywhere you could use a Color and get the 500 shade, but you can also index into it with [].

要获取所有主要材料色样的List，请使用 Colors.primaries .

To get a List of all the primary material color swatches, use Colors.primaries.

这篇关于是否有Flutter的“材料设计颜色"贴图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！