在 Dart/Flutter 中动态获取颜色的 Swatch答案

【问题标题】：Dynamically get Swatch for a color in Dart/Flutter在 Dart/Flutter 中动态获取颜色的 Swatch
【发布时间】：2023-01-31 09:29:57
【问题描述】：

我可以做这个：

Colors.red.shade100

对于所有颜色。

但是，我需要能够获得不同的样本，用于不同的颜色，用户自己选择的颜色。这意味着我在编译时不知道这些事情并且不能只做他们的 color.swatchX。

但是，我似乎无法弄清楚如何动态地做到这一点，我想要的东西看起来像这样：

Color getSwatch(Color color, int swatch)
{return color.shade(swatch)}`

这显然是行不通的，因为没有“阴影”功能。

【问题讨论】：

你喜欢创建一个颜色样本并像你一样使用 Color.shade 10 之类的东西吗？

标签： flutter dart colors

【解决方案1】：

这是我正在使用的一种解决方案，因为没有好的 API 可以在预定义的 MaterialColor 实例化后从中获取阴影。

这个想法是创建一个地图，其中包含您用作基色的 MaterialColor 的默认值（如果您没有 MaterialColor 的句柄，也可以从 Color.value 获取此值） .可以引用该值来检索其阴影，这是强度（色板）与其给定值的映射。

class ColorMap {
  static final Map<int, Map<int, int>> _colorToHue = {};

  static getColorToHue() {
    if (_colorToHue.isEmpty) {
      for (MaterialColor materialColor in Colors.primaries) {
        _colorToHue.putIfAbsent(materialColor.value, () => 
          { 
            50 : materialColor.shade50.value ,
            100 : materialColor.shade100.value,
            200 : materialColor.shade200.value ,
            300 : materialColor.shade300.value,
            400 : materialColor.shade400.value ,
            500 : materialColor.shade500.value,
            600 : materialColor.shade600.value ,
            700 : materialColor.shade700.value,
            800 : materialColor.shade800.value ,
            900 : materialColor.shade900.value,
          }
        );
      }
      _colorToHue.putIfAbsent(Colors.grey.value, () => 
        { 
          50 : Colors.grey.shade50.value ,
          100 : Colors.grey.shade100.value,
          200 : Colors.grey.shade200.value ,
          300 : Colors.grey.shade300.value,
          350 : Colors.grey[350]!.value,
          400 : Colors.grey.shade400.value,
          500 : Colors.grey.shade500.value,
          600 : Colors.grey.shade600.value,
          700 : Colors.grey.shade700.value,
          800 : Colors.grey.shade800.value,
          850 : Colors.grey[850]!.value,
          900 : Colors.grey.shade900.value,
        }
      );
      _colorToHue.putIfAbsent(Colors.black.value, () => 
        {
          12: Colors.black12.value,
          26: Colors.black26.value,
          38: Colors.black38.value,
          45: Colors.black45.value,
          54: Colors.black54.value,
          87: Colors.black87.value,
          100: Colors.black.value,
        }
      );
      _colorToHue.putIfAbsent(Colors.white.value, () => 
        {
          10: Colors.white10.value,
          12: Colors.white12.value,
          24: Colors.white24.value,
          30: Colors.white30.value,
          38: Colors.white38.value,
          54: Colors.white54.value,
          60: Colors.white60.value,
          70: Colors.white70.value,
          100: Colors.white.value,
        }
      );
    }
    return _colorToHue;
  }
}

要使用它，您可以使用如下方法，其中 color 是 MaterialColor 的默认颜色（相当于 Colors.red、Colors.blue 等），swatch 是相应的材料强度（50、300、900等）在下面的地图中定义。

Color getSwatch(Color color, int swatch) {
  return Color(ColorMap.getColorToHue()[color.value]![swatch]!);
}

有几点需要注意：

这不包括自定义颜色。为此，您必须创建自己的自定义样本并将其添加到地图中。
必须提供默认颜色。例如，此函数输出阴影。您不能将此函数的输出传递回函数并接收值。
这仅提供原色、白色、灰色和黑色。它不提供强调色。可以通过遍历 Colors.accents 并添加适当的强度以类似的方式添加它们，因为它们与原色不同。
黑色和白色没有映射到阴影强度的“默认”或主要值（由 Colors.black 或 Colors.white 返回的值）。其他颜色的强度 500 映射到它们的主要值。通过传入 100 作为 getSwatch 函数中的样本值来访问黑色和白色。请注意，这是一个自定义添加，以便允许该方法的全部功能。

【讨论】：