Colors 是否有颤振材料设计颜色的地图？

我有一个小部件，理想情况下我希望采用基本材质颜色并输出一个以该颜色的阴影为主题的小部件。例如：

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中查看autocomplete时，我看到在键入

Colors.pink

后，我能够指定阴影。但是，如果我将颜色设置为变量，例如

color color=Colors.pink

，我以后将无法执行

color.shade100

或

color[100]

。谢谢

MaterialColor

扩展了它，有点像一幅颜色的地图。您可以在任何可以使用

颜色的地方使用
色样
，并获得500阴影，但您也可以使用
[]
对其进行索引

要获得所有主要材料色样的
列表
，请使用。
查看有关颤振的Dart文档

您将注意到一些MaterialColor对象是如何创建的

显然，颤振对材料设计有很好的概念，并且描述的大多数颜色已经在颤振主包“package:flatter/material.dart”中预定义。所有这些都将可以开箱即用，但是

如果有人仍然想用特定的色调创建自己的材质颜色，您可以这样做：

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对象构造函数中的第一个参数是颜色的默认十六进制值，在本例中为0xFFAAD400。第二个参数是包含所有颜色样例的贴图。关于“十六进制值1”的所有值。。。。“十六进制值10”需要不同的颜色。例如，要了解如何选择（创建）这些样例，请看一看

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

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


前两个字符（FF）是关于alpha（透明度）的

第二个两个字符（FF）表示红色

第三个两个字符（90）表示绿色

蓝色的最后两（00）


谢谢，希望它能对某人有所帮助。
您可以像这样创建材质颜色：

const MaterialColor primaryColorShades = MaterialColor(
  0xFF181861,
  <int, Color>{
    50: Color(0xFFA4A4BF),
    100: Color(0xFFA4A4BF),
    200: Color(0xFFA4A4BF),
    300: Color(0xFF9191B3),
    400: Color(0xFF7F7FA6),
    500: Color(0xFF181861),
    600: Color(0xFF6D6D99),
    700: Color(0xFF5B5B8D),
    800: Color(0xFF494980),
    900: Color(0xFF181861),
  },
);

const MaterialColor primaryColorShades=材料颜色(
0xFF181861，
{
50：颜色（0xFFA4BF），
100：颜色（0xFFA4BF），
200：颜色（0xFFA4BF），
300：颜色（0xFF9191B3），
400：颜色（0xFF7F7FA6），
500：颜色（0xFF181861），
600：颜色（0xFF6D6D99），
700：颜色（0xFF5B5B8D），
800：颜色（0xFF494980），
900：颜色（0xFF181861），
},
);
我们必须使用地图：

如果您想创建自己的材质颜色和特定的色调，可以通过以RGBO（红色、绿色、蓝色、不透明度）形式创建自己的颜色贴图来执行以下操作：

Map colorMap={
50：颜色。来自RGBO（147205,72,1），
100：颜色。来自RGBO（147205,72,2），
200：颜色。来自RGBO（147205,72,3），
300：颜色。来自RGBO（147205,72,4），
400：颜色。来自RGBO（147205,72,5），
500：颜色。来自RGBO（147205,72,6），
600：颜色。来自RGBO（147205,72,7），
700：颜色。来自RGBO（147205,72,8），
800：颜色。来自RGBO（147205,72,9），
900：颜色。来自RGBO（147205,72,1），
};
//绿色代码：93cd48和前两个字符（FF）是alpha值（透明度）
MaterialColor customColor=MaterialColor（0xFF93cd48，颜色映射）；

如果您有类似于93cd48的颜色代码值，则要将其转换为RGB值，请使用

更多参考：

为什么不创建自己的材质颜色呢，这很简单。我还使用一个简单的网站来为flutter挑选颜色
 对不起，我知道这已经有很多好的答案了，但我一直在使用这个简单的实现将任何颜色转换为材质颜色，以防任何人发现它有用：

导入“包装：颤振/材料.省道”；
贴图获取样例（颜色）{
最终hslColor=hslColor.fromColor（颜色）；
最终亮度=hslColor.lightness；
///如果[500]是默认颜色，则至少有五种颜色
///低于[500]的步骤（即400、300、200、100、50）A
///5的除数意味着[50]是1.0或1.0的亮度
///颜色为#ffffff。值为6将接近白色
///但不完全如此。
最终低因子=6；
///如果[500]是默认颜色，则至少有四种颜色
///高于[500]的步骤。除数为4表示[900]为
///亮度为0.0或颜色为#000000
最终高除数=5；
最终低阶=（1.0-亮度）/低因子；
最终高阶=亮度/高除数；
返回{
50:（hslColor.withLightness（亮度+（低阶*5）））.toColor（），
100:（hslColor.withLightness（亮度+（低阶*4）））.toColor（），
200:（hslColor.withLightness（亮度+（低阶*3）））.toColor（），
300:（hslColor.withLightness（亮度+（低阶*2）））.toColor（），
400:（hslColor.withLightness（亮度+低阶））.toColor（），
500:（hslColor.withLightness（亮度））.toColor（），
600:（hslColor.withLightness（亮度-高阶））.toColor（），
700:（hslColor.withLightness（lightness-（highStep*2）））.toColor（），
800:（hslColor.withLightness（lightness-（highStep*3）））.toColor（），
900:（hslColor.withLightness（lightness-（highStep*4））.toColor（），
};
}

该函数只是在目标颜色的上方和下方添加相对亮度。获取最终材质颜色将是：

final materialColor=materialColor（color.value，getSwatch（color））；
我必须自己为色样定义贴图，还是有办法参考MaterialColor贴图？到目前为止，这是我的代码片段（抱歉格式化），w
Map<int, Color> colorMap = {
  50: Color.fromRGBO(147, 205, 72, .1),
  100: Color.fromRGBO(147, 205, 72, .2),
  200: Color.fromRGBO(147, 205, 72, .3),
  300: Color.fromRGBO(147, 205, 72, .4),
  400: Color.fromRGBO(147, 205, 72, .5),
  500: Color.fromRGBO(147, 205, 72, .6),
  600: Color.fromRGBO(147, 205, 72, .7),
  700: Color.fromRGBO(147, 205, 72, .8),
  800: Color.fromRGBO(147, 205, 72, .9),
  900: Color.fromRGBO(147, 205, 72, 1),
};
// Green color code: 93cd48 and first two characters (FF) are alpha values (transparency)
MaterialColor customColor = MaterialColor(0xFF93cd48, colorMap);