flutter 如何以编程方式生成所选颜色的Material Design Color集?

kpbpu008  于 2023-06-24  发布在  Flutter
关注(0)|答案(3)|浏览(157)

问题1.

假设选择的颜色是#a85c40。

现在,我们如何从拾取的颜色中生成具有附近阴影的材质颜色。附近的材质阴影将类似于阴影800。

问题2.

如何使用shade500生成所有颜色的颜色集?

9gm1akwq

9gm1akwq1#

您可以使用此tool来生成颜色。

rta7y2nd

rta7y2nd2#

您可以使用ThemeData()colorScheme:属性,并传递一个ColorScheme()对象,您可以在其中设置所有所需属性。
此视频解释了它https://www.youtube.com/watch?v=ZUi3hppgG2s

p4rjhz4m

p4rjhz4m3#

如果要生成单一颜色材质颜色阴影,请使用以下代码。

Color color = Color(0xffaad128);
List strengths = <double>[.05];
Map<int, Color> swatch = {};
final int r = color.red, g = color.green, b = color.blue;

for (int i = 1; i < 10; i++) {
  strengths.add(0.1 * i);
}
for (var strength in strengths) {
   final double ds = 0.5 - strength;
   swatch[(strength * 1000).round()] = Color.fromRGBO(
     r + ((ds < 0 ? r : (255 - r)) * ds).round(),
     g + ((ds < 0 ? g : (255 - g)) * ds).round(),
     b + ((ds < 0 ? b : (255 - b)) * ds).round(),
     1,
   );
 }

格式link
但如果你有最深或最浅的颜色

Map<int, Color> _generateShades({
     required Color lightest,
     required Color mid,
     required Color darkest,
   }) {
     HSLColor hslLightest = HSLColor.fromColor(lightest);
     HSLColor hslMid = HSLColor.fromColor(mid);
     HSLColor hsldarkest = HSLColor.fromColor(darkest);
     double lightnessDarks = (hslMid.lightness - hsldarkest.lightness).abs();
     double lightnessLights = (hslMid.lightness - hslLightest.lightness).abs();
     return _shader(hslMid, lightnessDarks, lightnessLights);
   }

Map<int, Color> _shader(
    HSLColor hslMid, double lightnessDarks, double lightnessLights) {
  double stepDarker = (lightnessDarks) / 4.0;
  double stepLighter = (lightnessLights) / 5.0;

  List<Color> strengths = [];

  ///dark colors steps
  for (int i = 0; i <= 4; i++) {
    double strength = hslMid.lightness - (i * stepDarker);
    HSLColor hsl = hslMid.withLightness(strength.clamp(0.0, 1.0));
    strengths.add(hsl.toColor());
  }

  ///light colors steps
  for (int i = 1; i <= 5; i++) {
    double strength = hslMid.lightness + (i * stepLighter);
    HSLColor hsl = hslMid.withLightness(strength.clamp(0.0, 1.0));
    strengths.insert(0, hsl.toColor());
  }
  Map<int, Color> swatch = {
    050: strengths[0],
    100: strengths[1],
    200: strengths[2],
    300: strengths[3],
    400: strengths[4],
    500: strengths[5],
    600: strengths[6],
    700: strengths[7],
    800: strengths[8],
    900: strengths[9],
  };

  return (swatch);
}

相关问题