colors - 有 Flutter 的 Material Design 颜色图吗？

Question

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

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,
    ),
  ),
);

有没有办法在调色板中返回 Material 颜色的“映射”，而不仅仅是一种颜色？当我查看 IntelliJ 中的自动完成功能时，我发现在输入 Colors.pink 后，我可以指定阴影。但是，如果我将颜色设置为变量，例如Color color = Colors.pink，我以后不能做 color.shade100 或 color[100]。谢谢!

Answer 1

对不起，我知道这已经有很多很好的答案，但这是我一直用来将任何颜色转换为 Material 颜色的简单实现，以防有人发现它有用:

import 'package:flutter/material.dart';

Map<int, Color> getSwatch(Color color) {
  final hslColor = HSLColor.fromColor(color);
  final lightness = hslColor.lightness;

  /// if [500] is the default color, there are at LEAST five
  /// steps below [500]. (i.e. 400, 300, 200, 100, 50.) A
  /// divisor of 5 would mean [50] is a lightness of 1.0 or
  /// a color of #ffffff. A value of six would be near white
  /// but not quite.
  final lowDivisor = 6;

  /// if [500] is the default color, there are at LEAST four
  /// steps above [500]. A divisor of 4 would mean [900] is
  /// a lightness of 0.0 or color of #000000
  final highDivisor = 5;

  final lowStep = (1.0 - lightness) / lowDivisor;
  final highStep = lightness / highDivisor;

  return {
    50: (hslColor.withLightness(lightness + (lowStep * 5))).toColor(),
    100: (hslColor.withLightness(lightness + (lowStep * 4))).toColor(),
    200: (hslColor.withLightness(lightness + (lowStep * 3))).toColor(),
    300: (hslColor.withLightness(lightness + (lowStep * 2))).toColor(),
    400: (hslColor.withLightness(lightness + lowStep)).toColor(),
    500: (hslColor.withLightness(lightness)).toColor(),
    600: (hslColor.withLightness(lightness - highStep)).toColor(),
    700: (hslColor.withLightness(lightness - (highStep * 2))).toColor(),
    800: (hslColor.withLightness(lightness - (highStep * 3))).toColor(),
    900: (hslColor.withLightness(lightness - (highStep * 4))).toColor(),
  };
}

该功能只是在目标颜色的上方和下方添加相对的亮度。获得最终的 Material 颜色将是:

final materialColor = MaterialColor(color.value, getSwatch(color));