flutter 动态获取“ dart /抖动”中颜色的“色板”

oyxsuwqo  于 2023-01-31  发布在  Flutter
关注(0)|答案(1)|浏览(139)

我可以这样做:

Colors.red.shade100

适用于所有颜色。
但是我需要,能够得到不同的色板,对于不同的颜色,用户自己选择的颜色,这意味着我在编译的时候不知道这些东西,不能只做他们的颜色。swatchX。
然而,我似乎不能弄清楚如何动态地做到这一点,我想的东西看起来像这样:

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

这显然不起作用,因为没有“阴影”功能。

s5a0g9ez

s5a0g9ez1#

这是我正在使用的一个解决方案,因为在示例化预定义的MaterialColor之后,没有好的API可以从它获取着色。
我们的想法是创建一个Map,其中包含了您用作基色的MaterialColor的默认值(如果您没有MaterialColor的句柄,也可以从Color.value获取此值)。该值可以被引用以检索其阴影,这是一个强度(样本)到其给定值的Map。

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(相当于www.example.com、www.example.com等)的默认颜色,swatch是在下面的贴图中定义的相应材质强度(50、300、900等)。 Colors.red , Colors.blue , etc) and swatch is the corresponding Material intensity (50, 300, 900, etc) defined in the map below.

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

有几点需要注意:

  • 这不包括自定义颜色。要做到这一点,您将不得不创建自己的自定义色板并将其添加到Map中。
  • 必须提供默认的颜色。例如,这个函数输出一个阴影。你不能把这个函数的输出传递回函数并接收一个值。
  • 这只提供原色,即白色、灰色和黑色。它不提供强调色。由于它们与原色不同,可以通过在Colors.accents上循环并添加适当的强度,以类似的方式添加它们。
  • 黑色和白色没有Map到阴影强度的"默认"或主值(www.example.com或Colors. white返回的值)。其他颜色的强度500Map到其主值。黑色和白色通过传入100作为getSwatch函数中的样本值来访问。Colors.black or Colors.white) mapped to a shade intensity. The other colors have an intensity of 500 mapped to their primary value. Black and white are instead accessed by passing in 100 as the swatch value in the getSwatch function. Note that this is a custom addition in order to allow full functionality of the method.

相关问题