flutter 以编程方式使省道中的十六进制颜色变亮或变暗

6l7fqoea  于 2023-02-25  发布在  Flutter
关注(0)|答案(7)|浏览(228)

我正在尝试转换这个哈希颜色代码#159424**(绿色)**到更多的黑暗和减轻编程。如何做到这一点,请帮助?

使绿色变深

toDarkColor(String hashColor){
  // how to convert that hash string to make green color darker?
}

使绿色变浅

toLightColor(String hashColor){
  // how to convert that hash string to make green color lighter? 
}
643ylb08

643ylb081#

适用于希望加深或加深Color而不是十六进制字符串的用户

// ranges from 0.0 to 1.0

Color darken(Color color, [double amount = .1]) {
  assert(amount >= 0 && amount <= 1);

  final hsl = HSLColor.fromColor(color);
  final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));

  return hslDark.toColor();
}

Color lighten(Color color, [double amount = .1]) {
  assert(amount >= 0 && amount <= 1);

  final hsl = HSLColor.fromColor(color);
  final hslLight = hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));

  return hslLight.toColor();
}

// usage
final lightRed = lighten(Colors.red);
final darkBlue = darken(Colors.blue, .3);

djmepvbi

djmepvbi2#

无插件的颜色准确解决方案

可接受的答案会在颜色变暗时改变颜色的色调(色调更饱和)。此外,它的增亮功能会为某些颜色生成0.3的纯白色,尽管白色仅应在1的量下达到。

以下两种方法可生成看起来“更深”或“更浅”的基色阴影,而不更改色调**。

import 'package:flutter/material.dart';

/// Darken a color by [percent] amount (100 = black)
// ........................................................
Color darken(Color c, [int percent = 10]) {
    assert(1 <= percent && percent <= 100);
    var f = 1 - percent / 100;
    return Color.fromARGB(
        c.alpha,
        (c.red * f).round(),
        (c.green  * f).round(),
        (c.blue * f).round()
    );
}

/// Lighten a color by [percent] amount (100 = white)
// ........................................................
Color lighten(Color c, [int percent = 10]) {
    assert(1 <= percent && percent <= 100);
    var p = percent / 100;
    return Color.fromARGB(
        c.alpha,
        c.red + ((255 - c.red) * p).round(),
        c.green + ((255 - c.green) * p).round(),
        c.blue + ((255 - c.blue) * p).round()
    );
}

示例:将颜色变暗15%。

final Color darkerGreen = darken(Color(0xFF159424), 15);

如果从OP要求的十六进制字符串值开始,则使用J.M. Taylor的解决方案:

Color hexToColor(String code) {
    return Color(int.parse(code.substring(0, 6), radix: 16) + 0xFF000000);
}

final Color darkerGreen = darken(hexToColor('#159424'));

注意:它适用于Flutter项目,因为它使用材质的Color类。

eblbsuwk

eblbsuwk3#

我基于https://stackoverflow.com/a/58604669/7479173的解决方案

extension ColorBrightness on Color {
  Color darken([double amount = .1]) {
    assert(amount >= 0 && amount <= 1);

    final hsl = HSLColor.fromColor(this);
    final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));

    return hslDark.toColor();
  }

  Color lighten([double amount = .1]) {
    assert(amount >= 0 && amount <= 1);

    final hsl = HSLColor.fromColor(this);
    final hslLight =
        hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));

    return hslLight.toColor();
  }
}

利用该方法,用户可以简单地:

Colors.red.darken()
Colors.red.lighten()
Colors.red.lighten(0.1)

这工作在任何颜色只要你导入扩展。

olqngx59

olqngx594#

您可以使用tinycolor软件包:

TinyColor.fromString("#159424").darken(10).color

编辑:
您可以将Color转换回十六进制字符串,如下所示:

String toHex(Color color) {
  return "#${color.red.toRadixString(16).padLeft(2, "0")}"
      "${color.green.toRadixString(16).padLeft(2, "0")}"
      "${color.blue.toRadixString(16).padLeft(2, "0")}";
}

或者如果需要不透明度/Alpha:

String toHex(Color color) {
  return "#${color.alpha.toRadixString(16).padLeft(2, "0")}"
      "${color.red.toRadixString(16).padLeft(2, "0")}"
      "${color.green.toRadixString(16).padLeft(2, "0")}"
      "${color.blue.toRadixString(16).padLeft(2, "0")}";
}
k10s72fa

k10s72fa5#

我使用HSLColorwithLightness方法来减轻颜色。

HSLColor.fromColor(Colors.red).withLightness(0.95).toColor()
cld4siwp

cld4siwp6#

由于TinyColor的某些部分似乎已经损坏,而我只需要调亮和调暗,NearHuscarl的答案对我来说是完美的。
但是,它缺少了完整回答原始问题所必需的一个部分,即将散列颜色代码(声明为String)转换为Color
为此,您可以使用以下命令:

Color hexToColor(String code) {
    return Color(int.parse(code.substring(0, 6), radix: 16) + 0xFF000000);
}

上面的代码不是我写的,而是我从a tutorial here中学到的。
然后将其与NearHuscarl的代码结合使用,即可获得所需的效果:

final Color darkerGreen = darken(hexToColor('#159424'));
h22fl7wq

h22fl7wq7#

一个内衬内置方法:

Color.lerp(myColor, Colors.white, 0.4) // 0 = keep as is, 1 = white

相关问题