flutter 如何将颜色转换为MaterialColor,以便在应用程序中使用有限的调色板?

q8l4jmvw  于 2023-01-02  发布在  Flutter
关注(0)|答案(2)|浏览(655)

对于我的应用程序,我想限制我的调色板的颜色,因此我做了一个类的常量包含颜色的示例:

class Colors 
{
  static var red = Color(0xFFFF1212);
  static var blue = Color(0xFF1212FF);
  static var green = Color(0xFF12F1FA);
}

但是有时候需要一个MaterialColor,所以我需要把一个Color示例转换成一个MaterialColor示例,但是构造器需要提供一个样本(某种调色板),我该怎么做呢?

lc8prwob

lc8prwob1#

我的一个方法就是受article的启发,一个方法是使用固定的红,绿色,蓝通道的不透明度。颜色也分别存储了红,绿,蓝通道,根据Documentation
有了这些拼图,我做了这个函数:

MaterialColor getMaterialColor(Color color) {
    final int red = color.red;
    final int green = color.green;
    final int blue = color.blue;

    final Map<int, Color> shades = {
      50: Color.fromRGBO(red, green, blue, .1),
      100: Color.fromRGBO(red, green, blue, .2),
      200: Color.fromRGBO(red, green, blue, .3),
      300: Color.fromRGBO(red, green, blue, .4),
      400: Color.fromRGBO(red, green, blue, .5),
      500: Color.fromRGBO(red, green, blue, .6),
      600: Color.fromRGBO(red, green, blue, .7),
      700: Color.fromRGBO(red, green, blue, .8),
      800: Color.fromRGBO(red, green, blue, .9),
      900: Color.fromRGBO(red, green, blue, 1),
    };

    return MaterialColor(color.value, shades);
  }

使用上面的代码,我执行以下操作:
1.我提取红色、绿色和蓝色通道
1.我把一个固定的阴影不透明
1.我使用制造的阴影并将它们放入MaterialColor
我知道我可以用第二个参数来表示阴影的数量,但这对我来说太麻烦了。在我的情况下,有一些固定的阴影就足够了。

kxe2p93d

kxe2p93d2#

您可以查看此页面

MaterialColor getMaterialColor(Color color) {
final Map<int, Color> shades = {
  50: Color.fromRGBO(136, 14, 79, .1),
  100: Color.fromRGBO(136, 14, 79, .2),
  200: Color.fromRGBO(136, 14, 79, .3),
  300: Color.fromRGBO(136, 14, 79, .4),
  400: Color.fromRGBO(136, 14, 79, .5),
  500: Color.fromRGBO(136, 14, 79, .6),
  600: Color.fromRGBO(136, 14, 79, .7),
  700: Color.fromRGBO(136, 14, 79, .8),
  800: Color.fromRGBO(136, 14, 79, .9),
  900: Color.fromRGBO(136, 14, 79, 1),
};
return MaterialColor(color.value, shades);

}

var materialColor = getMaterialColor(Color(0xFF42A5F5));

print(materialColor);

相关问题