我如何转换一个十六进制的颜色字符串像#b74093在扑动的颜色?

我想在Dart中使用HEX颜色代码。


当前回答

由于Color构造函数不支持十六进制字符串,所以我们应该寻找其他替代方法。

有几种可能性:

1-第一个是创建一个小函数,允许您将颜色十六进制字符串转换为颜色对象。

代码:

   Color colorFromHex(String hexColor) {
   final hexCode = hexColor.replaceAll('#', '');
   if (hexColor.length == 6) {
    hexColor = 'FF' + hexColor; // FF as the opacity value if you don't add it.
   }
  return Color(int.parse('FF$hexCode', radix: 16));
}

用法:

 Container(
          color: colorFromHex('abcdff'),
          child: Text(
            'Never stop learning',
            style: TextStyle(color: colorFromHex('bbffffcc')),
          ),
        )

2-第二种可能是使用增压包。supercharge为所有Flutter开发人员带来了Kotlin等语言的所有舒适特性。

添加附加依赖:^1.X。X(找到最新版本)到你的项目,并开始在所有地方使用supercharge:

import 'package:supercharged/supercharged.dart';

现在,将任何字符串转换为颜色

代码:

"#ff00ff".toColor(); // Painless hex to color
"red".toColor(); // Supports all web color names

你也可以使用六色包装,这也是很棒的。

其他回答

如果你想使用不透明度的颤振十六进制颜色

只使用。Color(0x800F1D41)表示50%,80表示50%。

详情请点击这里

在Flutter中,Color类只接受整数作为参数,或者可以使用fromARGB和fromRGBO命名的构造函数。

因此,我们只需要将字符串#b74093转换为整数值。此外,我们需要尊重不透明度总是需要指定的。 255(完全)不透明度由十六进制值FF表示。这已经剩下0xFF了。现在,我们只需要像这样添加颜色字符串:

const color = const Color(0xffb74093); // Second `const` is optional in assignments.

字母可以选择大写或不大写:

const color = const Color(0xFFB74093);

如果你想使用百分比不透明度值,你可以用这个表中的值替换第一个FF(也适用于其他颜色通道)。

扩展类

从Dart 2.6.0开始,你可以为Color类创建一个扩展,它允许你使用十六进制的颜色字符串来创建一个Color对象:

extension HexColor on Color {
  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
  static Color fromHex(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return Color(int.parse(buffer.toString(), radix: 16));
  }

  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
      '${alpha.toRadixString(16).padLeft(2, '0')}'
      '${red.toRadixString(16).padLeft(2, '0')}'
      '${green.toRadixString(16).padLeft(2, '0')}'
      '${blue.toRadixString(16).padLeft(2, '0')}';
}

fromHex方法也可以在mixin或类中声明,因为HexColor名称需要显式指定才能使用它,但是扩展对于可以隐式使用的toHex方法很有用。这里有一个例子:

void main() {
  final Color color = HexColor.fromHex('#aabbcc');

  print(color.toHex());
  print(const Color(0xffaabbcc).toHex());
}

使用十六进制字符串的缺点

这里的许多其他答案展示了如何从十六进制字符串动态创建Color,就像我上面所做的那样。然而,这样做意味着颜色不能是const。 理想情况下,您应该按照我在回答的第一部分中解释的方式分配颜色,这种方式在大量实例化颜色时更有效,Flutter小部件通常就是这种情况。

要将十六进制字符串转换为整数,请执行以下操作:

int hexToInt(String hex)
{
  int val = 0;
  int len = hex.length;
  for (int i = 0; i < len; i++) {
    int hexDigit = hex.codeUnitAt(i);
    if (hexDigit >= 48 && hexDigit <= 57) {
      val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
    } else if (hexDigit >= 65 && hexDigit <= 70) {
      // A..F
      val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
    } else if (hexDigit >= 97 && hexDigit <= 102) {
      // a..f
      val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
    } else {
      throw new FormatException("Invalid hexadecimal value");
    }
  }
  return val;
}

电话的例子:

Color color = new Color(hexToInt("FFB74093"));

如果你迫切需要一个十六进制的颜色在你的应用程序,有一个简单的步骤,你可以遵循:

从这里简单地将您的十六进制颜色转换为RGB格式。 获取RGB值。 在Flutter中,您有一个简单的选项来使用RGB颜色: Color.fromRGBO(r_value, g_value, b_value,不透明度)将为您做这项工作。 继续调整O_value以获得您想要的颜色。

不需要使用函数。

例如,使用colorcode为容器赋予颜色:

Container
(
    color:Color(0xff000000)
)

这里的0xff是格式后面跟着颜色代码