如何在Flutter中使用十六进制颜色字符串?


Answers:


348

在Flutter中,Color该类仅接受整数作为参数,或者可以使用命名的构造函数fromARGBfromRGBO

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

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

可以选择是否将字母大写:

const color = const Color(0xFFB74093);

从Dart开始2.6.0,您可以创建一个extensionColor类,让您使用十六进制颜色字符串创建一个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或中声明class因为HexColor要使用该名称需要显式指定名称,但是该扩展名对该toHex方法很有用,可以隐式使用。这是一个例子:

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

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

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

这里的许多其他答案都显示了如何Color像上面我一样从十六进制字符串动态创建a 。但是,这样做意味着颜色不能为const
理想情况下,您将按照我在此答案第一部分中说明的方式分配颜色,这在大量实例化颜色时效率更高(通常是Flutter小部件)。


你不能在镖静态方法扩展尚未github.com/dart-lang/language/issues/723
卢卡斯WISNIEWSKI

1
@ŁukaszWiśniewski是的,您可以;)您不能使用扩展的类来调用它们(HexColor.fromHex可以,但Color.fromHex不能)。
creativecreatoror

我很惊讶您可以将0xFF作为int的一部分传递
Hamish Johnson

@HamishJohnson 0x只是表示后面的数字将被解析为十六进制🙃
creativecreatorormaybenot

135

Color类期待一个ARGB整数。由于您尝试将其与RGBvalue 一起使用,因此将其表示为int并以前缀0xff

Color mainColor = Color(0xffb74093);

如果您对此感到恼火而仍然希望使用字符串,则可以扩展Color并添加字符串构造函数

class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

用法

Color color1 = HexColor("b74093");
Color color2 = HexColor("#b74093");
Color color3 = HexColor("#88b74093"); // if you wish to use ARGB format

这真的很棒!也可以与LinearGradient一起使用。
xhinoda

HexColor类对我而言不适用于MaterialColor,它一直在抱怨第二个参数。请在这里帮助
leeCoder

20

如果要使用#123456格式的十六进制颜色代码,则非常易于使用,请创建Color类型的A变量,并为其分配以下值。

Color myHexColor = Color(0xff123456) 

// her you notice I use the 0xff and that is opacity or transparency of the color 
// and you can also change these value .

使用myhexcolor,就可以开始使用了。

如果要直接从十六进制代码更改颜色的不透明度,则将0xff中的ff值更改为下表中的相应值。

十六进制不透明度值

100%— FF

95%-F2

90%— E6

85%— D9

80%— CC

75%—高炉

70%— B3

65%— A6

60%— 99

55%— 8摄氏度

50%— 80

45%— 73

40%— 66

35%— 59

30%— 4D

25%— 40

20%— 33

15%— 26

10%— 1A

5%— 0天

0%-00


1
保存此引用是一个好主意,尽管在大多数情况下.withOpacity(0.2)足够有用。
Gauris Javier

18

要将十六进制String转换为int,请执行以下操作:

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

18

一个不使用类的简单函数:

Color _colorFromHex(String hexColor) {
  final hexCode = hexColor.replaceAll('#', '');
  return Color(int.parse('FF$hexCode', radix: 16));
}

您可以像这样使用它:

Color color1 = _colorFromHex("b74093");
Color color2 = _colorFromHex("#b74093");

1
谢谢@ jeroen-meijer进行编辑。实际上,如果您喜欢的话,也可以使用这种衬板Color(int.parse('#000000'.replaceAll('#', '0xff')))
Alvin Konda

16

简单的方法 :

String color = yourHexColor.replaceAll('#', '0xff');

用法:

Container(
    color: Color(int.parse(color)),
)

14

还有另一种解决方案。如果您将颜色存储为普通的十六进制字符串,并且不想为其添加透明度(以FF开头):1)将十六进制字符串转换为int要将十六进制字符串转换为整数,请执行以下操作之一:

var myInt = int.parse(hexString, radix: 16);

要么

var myInt = int.parse("0x$hexString");

作为0x(或-0x)前缀将使int.parse默认为基数16。

2)通过代码为您的颜色添加不透明度

Color color = new Color(myInt).withOpacity(1.0);

1
我需要Flutter的“前导FF” ThemeData
creativecreatoror

我喜欢此解决方案的简单性,但正如@creativecreatoror可能未提到的那样,仍然需要领先的FF。
KevinM

7

在Flutter中,它使用RGB从带有alpha的颜色创建颜色,使用

return new Container(
  color: new Color.fromRGBO(0, 0, 0, 0.5),
);

如何使用十六进制颜色:

return new Container(
  color: new Color(0xFF4286f4),
);
//0xFF -> the opacity (FF for opaque)
//4286f4 -> the hex-color

不透明的十六进制颜色:

return new Container(
  color: new Color(0xFF4286f4).withOpacity(0.5),
);

//或更改“ FF”值

100%FF
 95%F2
 90%E6
 85%D9
 80%CC
 75%BF
 70%B3
 65%A6
 60%99
 55%8C
 50%80
 45%73
 40%66
 35%59
 30%4D
 25%40
 20%33
 15%26
 10%1A
 5%0D
 0%00

有关更多信息,请访问官方链接https://api.flutter.dev/flutter/dart-ui/Color-class.html


5

utils.dart

///
/// Convert a color hex-string to a Color object.
///
Color getColorFromHex(String hexColor) {
  hexColor = hexColor.toUpperCase().replaceAll('#', '');

  if (hexColor.length == 6) {
    hexColor = 'FF' + hexColor;
  }

  return Color(int.parse(hexColor, radix: 16));
}

用法示例

Text(
  'hello world',
  style: TextStyle(
    color: getColorFromHex('#aabbcc'),
    fontWeight: FontWeight.bold,
  )
)

5

供一般参考。有一种使用Supercharged库的简单方法。尽管您可以在所有提到的解决方案中使用扩展方法,但是您会找到实用的用户库工具包。

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

比较容易,对吧?

增压


4

"#b74093"?好...

十六进制配方

int getColorHexFromStr(String colorStr)
{
  colorStr = "FF" + colorStr;
  colorStr = colorStr.replaceAll("#", "");
  int val = 0;
  int len = colorStr.length;
  for (int i = 0; i < len; i++) {
    int hexDigit = colorStr.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("An error occurred when converting a color");
    }
  }
  return val;
}

4
import 'package:flutter/material.dart';
class HexToColor extends Color{
  static _hexToColor(String code) {
    return int.parse(code.substring(1, 7), radix: 16) + 0xFF000000;
  }
  HexToColor(final String code) : super(_hexToColor(code));
}

导入新类并像这样使用它 HexToColor('#F2A03D')


3

我错过了将十六进制数字用于fromRGB构造函数的明显答案:

Color.fromRGBO(0xb7, 0x40, 0x93, 1),

1

您可以单击Color Widget,它会在更深入的信息中告诉您这些字母的含义。您也可以使用Color.fromARGB()方法来创建自定义颜色,这对我来说要容易得多。使用Flutter Doctor拾色器网站可以为扑打应用选择所需的任何颜色。


0
String hexString = "45a3df";
Color(int.parse("0xff${hexString}"));

不知道为什么要取消它,这是我的解决方案。
不需要其他步骤的唯一方法


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.