如何将颜色转换为 MaterialColor，以便我可以在我的应用程序中拥有有限的调色板？

Question

对于我的应用程序，我想限制我的颜色调色板，因此我创建了一个充满包含颜色实例的常量的类：

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

但有时需要

MaterialColor

。因此，我需要以某种方式将 Color 实例转换为

MaterialColor

实例。但建造者需要提供一个样本（某种调色板）。我怎样才能做到这一点？

Answer 1

我的方法受到这篇文章的启发。我的方法是使用各种不透明度通道，在红色、绿色和蓝色通道上具有固定值。根据此文档，颜色还存储在单独的红色、绿色和蓝色通道中，这些通道可通过实例变量访问。

有了这些拼图，我做了这个功能：

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

使用上面的代码，我执行以下操作：

我提取红绿和蓝色通道
我为固定阴影设置了不透明度
我使用制造好的色调并将它们放入
3. MaterialColor

我知道我可以使用第二个参数和色调数量，但这对我来说太麻烦了。就我而言，有某种固定的色调就足够了。

Answer 2

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

final Map<int, Color> shades = {
  50: Color.fromARGB(alpha, red, green, blue),
  100: Color.fromARGB(alpha, red, green, blue),
  200: Color.fromARGB(alpha, red, green, blue),
  300: Color.fromARGB(alpha, red, green, blue),
  400: Color.fromARGB(alpha, red, green, blue),
  500: Color.fromARGB(alpha, red, green, blue),
  600: Color.fromARGB(alpha, red, green, blue),
  700: Color.fromARGB(alpha, red, green, blue),
  800: Color.fromARGB(alpha, red, green, blue),
  900: Color.fromARGB(alpha, red, green, blue),
};

 return MaterialColor(color.value, shades);
}

我发现这在将颜色转换为材质颜色方面非常准确

Answer 3

使用我们在 dart 中提供的扩展方法非常简单，请按照以下代码操作。

extension ColorsExt on Color {

  MaterialColor toMaterialColor() {
    final int red = this.red;
    final int green = this.green;
    final int blue = this.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(value, shades);
  }
}

用途：

int colorValue = ...
Color(colorValue).toMaterialColor()

Answer 4

您可以查看此页面，

https://gist.github.com/Nitingadhiya/58022151fb8bab45b2734f05bb70d7b3

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

Answer 5

要从 Color 获取 MaterialColor，可以使用扩展方法：

import 'package:flutter/material.dart';

extension ColorExtension on Color {
  MaterialColor get toMaterial {
    final int red = this.red;
    final int green = this.green;
    final int blue = this.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(value, shades);
  }
}

使用方法

您现在可以像这样使用它：

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.red.toMaterial,
  ),
  home: MyHomePage(),
);

这使得您可以轻松地为您想要的任何颜色创建 MaterialColor！