是否有Flutter材质设计颜色的地图？

问题描述：

我有一个小部件，我最好喜欢采用基础材质颜色并输出以该颜色为主题的小部件。例如：是否有Flutter材质设计颜色的地图？

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

要求我指定两个粉色阴影。理想情况下，我可以这样做：

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]。谢谢！

答

MaterialColor延伸ColorSwatch这是有点像颜色Map。您可以在任何可以使用Color的地方使用ColorSwatch并获得500色，但您也可以用[]索引。

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

我一定要定义映射自己的ColorSwatch，或者是有什么办法可以参考MaterialColor地图？到目前为止，这是我的代码片段（道歉格式化），我必须手动定义颜色的每个阴影： 'var map = new Map （）; 012.map.putIfAbsent（50，（）=> Colors.pink [50]）; map.putIfAbsent（100，（）=> Colors.pink [100]）; var colorswatch = new ColorSwatch（500，map）; //更新后的设置颜色： //颜色：colorswatch [50]' 我尝试使用Colors.primaries中的颜色，但它们返回的是MaterialColor而不是Map。 – Mary

我不确定你为什么在这里使用'Map'。你可以说'ColorSwatch color = Colors.pink;'，稍后你可以说'color [50]'。如果您知道所有色板都是“MaterialColor”，只需使用“MaterialColor”作为“color”的类型。 –

啊，我以为我不得不实例化一个新的ColorSwatch对象（它需要一个Map）！我没有意识到我可以将ColorSwatch对象设置为现有的MaterialColor。谢谢。 – Mary

答

如果你看看达特文档中关于扑here

你会发现如何一些MaterialColor对象被创建。

显然Flutter对MaterialDesign有着非常好的概念，并且大多数颜色描述here已经在主要扑翼包“package：flutter/material.dart”中预定义。所有这一切都将是可使用现成的，但

如果有人仍想创造自己的MaterialColor与特定的色调，你可以做这样的事情：

MaterialColor myGreen = const MaterialColor(0xFFAAD400, 
    const { 
    50 : const Color(hex_value1), 
    100 : const Color(hex_value2), 
    200 : const Color(hex_value3), 
    300 : const Color(hex_value4), 
    400 : const Color(hex_value5), 
    500 : const Color(hex_value6), 
    600 : const Color(hex_value7), 
    700 : const Color(hex_value8), 
    800 : const Color(hex_value9), 
    900 : const Color(hex_value10)});

中的第一个参数MaterialColor对象构造函数是您的颜色的默认HEX值，在这种情况下为0xFFAAD400。第二个参数是包含所有颜色样本的地图。所有关于“hex_value1”....“hex_value10”的值都需要不同的颜色。为了得到一些想法如何选择（创建）这些样本，例如看看here

对于那些谁不知道如何读的颜色的十六进制值，在这里我将发布一些额外的信息：

例如，要得到完全不透明的橙色（0xFFFF9000），你可以使用 const的颜色（0xFFFF9000），其中：

前两个字符（FF）是对alpha（透明度），
秒两个字符（FF）是用于红色，
第三两个字符（90）是用于绿色，
和最后两个（00）为蓝色。

感谢，希望这将有助于给别人

是否有Flutter材质设计颜色的地图？

相关推荐