我如何转换一个十六进制的颜色字符串像#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

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

其他回答

可以使用from_css_color包从十六进制字符串中获取Color。它支持三位和六位RGB十六进制表示法。

Color color = fromCSSColor('#ff00aa')

为了优化起见,为每种颜色创建一个Color实例,并将其存储在某个地方以供以后使用。

你可以写一个小的控制台工具来转换字符串:

import 'dart:convert';
import 'dart:io';

void main() {
  while (true) {
    var line = stdin.readLineSync(encoding: utf8);

    print(HexColor.fromHex(line!));
  }
}

class HexColor {
  static fromHex(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return int.parse(buffer.toString(), radix: 16);
  }
}

在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小部件通常就是这种情况。

如何在扑动中使用十六进制颜色代码#B74093

只需从十六进制颜色代码中删除#符号,并在color类中添加带有颜色代码的0xFF:

#b74093将在Flutter中变为Color(0xffb74093)

#B74093将在Flutter中变为Color(0xFFB74093)

ff或ff in Color(0xFFB74093)定义不透明度。

十六进制颜色的例子,所有不透明度类型在达特

在文件中添加此函数


Color parseColor(String color) {
  String hex = color.replaceAll("#", "");
  if (hex.isEmpty) hex = "ffffff";
  if (hex.length == 3) {
    hex = '${hex.substring(0, 1)}${hex.substring(0, 1)}${hex.substring(1, 2)}${hex.substring(1, 2)}${hex.substring(2, 3)}${hex.substring(2, 3)}';
  }
  Color col = Color(int.parse(hex, radix: 16)).withOpacity(1.0);
  return col;
}

然后像-一样使用它

Container(
    color: parseColor("#b74093")
)