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

我如何转换十六进制颜色字符串像#b74093到Color颤振?

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

503377 次浏览
小开
最佳答案

在Flutter中，Color类只接受integers作为参数，或者有可能使用命名构造函数fromARGB和fromRGBO。

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

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

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

const color = const Color(0xFFB74093);

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

扩展类

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或class中声明，因为要使用它，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"));
小开

# EYZ0吗?好吧……

到HEX配方

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;
}
小开

还有另一种解决方案。如果您将颜色存储为普通的十六进制字符串，并且不想为其添加不透明度(前导"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);
小开

Color类需要一个ARGB整数。由于您尝试使用RGB值来使用它，请将其表示为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
小开 
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')
小开

你可以点击Color Widget，它会告诉你更深入的信息，这些字母代表什么。

你也可以使用Color.fromARGB()方法来创建自定义颜色，这对我来说更容易。使用颤振医生选色器网站为您的Flutter应用程序选择任何颜色。

小开

在Flutter中，要从带alpha的RGB创建颜色，请使用:

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 hexadecimal color

不透明的十六进制颜色:

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

//或改变" ffquot;价值

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

有关更多信息，请参阅官方文档页面颜色类- dart:ui库- dart API。

小开

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

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

你可以这样使用它:

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

文件# EYZ0

///
/// 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,
)
)
小开

简单的方法:

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

用法:

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

在fromRGB构造函数中使用十六进制数:

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

如果您想使用格式为#123456的颜色的十六进制代码，那么很容易做到。创建一个类型为Color的变量，并将以下值赋给它。

Color myHexColor = Color(0xff123456)


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

使用myHexColor，你就可以开始了。

如果您想直接从十六进制代码更改颜色的不透明度，则将0 xff中的ff值更改为下表中相应的值。(或者你也可以使用

myHexColor.withOpacity(0.2)

这是比较简单的方法。0.2是平均20%不透明度)

十六进制的不透明度值

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
小开

供一般参考。使用增压库有一种更简单的方法。虽然您可以对所有提到的解决方案使用扩展方法，但您可以找到实用的用户库工具包。

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

容易,对吧?

增压

小开

这就是我的解决方案:

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

这是唯一不需要额外步骤的方法。

小开

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

Color color = fromCSSColor('#ff00aa')

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

小开

使用hexcolor将十六进制颜色带入Dart hexcolorPlugin:

hexcolor: ^2.0.3

示例使用

import 'package:hexcolor/hexcolor.dart';
Container(
decoration: new BoxDecoration(
color: Hexcolor('#34cc89'),
),
child: Center(
child: Text(
'Running on: $_platformVersion\n',
style: TextStyle(color: Hexcolor("#f2f2f2")),
),
),
),
小开

在文件中添加此函数


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")
)
小开

你可以用这个

Color getColorFromColorCode(String code){
return Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
}
小开

最简单的方法是将其转换为整数。例如，# BCE6EB。你可以添加0 xff，然后删除标签，使它:

0 xffbce6eb

然后让我们假设你要通过这样做来实现它:

# EYZ0

如果你只能使用十六进制，那么我建议使用Hexcolor包。

小开

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

有几种可能性:

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

代码:

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

# EYZ0:

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

第二种可能是使用增压包。 增压将Kotlin等语言的所有舒适特性带给所有Flutter开发人员。

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

import 'package:supercharged/supercharged.dart';

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

代码:

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

你也可以使用hexcolor包，它也很棒。

小开

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

  1. 将您的十六进制颜色简单地从在这里转换为RGB格式。

  2. 获取RGB值。

  3. 在Flutter中，您可以简单地选择使用RGB颜色:

    Color.fromRGBO(r_value, g_value, b_value, opacity)将为您完成这项工作。

  4. 继续，调整O_value得到你想要的颜色。

小开

不需要使用函数。

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

Container
(
color:Color(0xff000000)
)

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

小开

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

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

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

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

Color(0xFFB74093)中的ff or FF定义了不透明度。

达特pad中所有不透明度类型的十六进制颜色示例

Enter image description here

小开

感谢提问，简单的解决方法如下:

//颜色为十六进制字符串

colorToHexString(Color color) {
return '#FF${color.value.toRadixString(16).substring(2, 8)}';
}

//十六进制字符串到颜色

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

//如何调用函数

String hexCode = colorToHexString(Colors.green);
Color bgColor = hexStringToColor(hexCode);
print("$hexCode = $bgColor");

享受代码并帮助他人:)

小开

我创建了这个颤振扩展函数的字符串类..有点有用，如果你也讨厌0xFFF😎

extension on String {
Color parse() {
var hexColor = this.replaceAll("#", "");
if (hexColor.length == 6) {
hexColor = "FF" + hexColor;
}
if (hexColor.length == 8) {
return Color(int.parse("0x$hexColor"));
}
}
}

您可以使用任何十六进制颜色代码字符串如下…

'#bdbdbd'.parse() // this will return Color class object which you use in widget...
小开

//调用这一行来设置颜色
颜色:HexColor (HexColor.Primarycolor) < / p >

我已经创建了一个类HexColor和玷污所有的颜色在这个类。这是100%工作的代码

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


static var Primarycolor="FF3E3F";


static var Accentcolor="b74093";


static var white="b74093";


static var black="b74093";


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

我使用这个material_color_gen包，它的工作就像一个魅力

material_color_gen: ^2.0.0

使用:

import 'package:material_color_gen/material_color_gen.dart';
primarySwatch: Color(0xFFFF0000).toMaterialColor()

这是一个HexColor示例:#ff0000 更改# 0xFF的结果是:0xFFFF0000

官方链接: # EYZ0 < / p >

小开

最好的方法是使用flutter十六进制颜色插件，来自pub.dev 

import 'package:hexcolor/hexcolor.dart';

然后把它用在这种特殊的方式上。

Text(
'Running on: $_platformVersion\n',
style: TextStyle(color: HexColor("#f2f2f2")),
),
Text(
"Hex From Material  $textColor",
style: TextStyle(color: ColorToHex(Colors.teal)),
),

特定插件在这里。

小开

简单的扩展基于@Serdar回答https://stackoverflow.com/a/57943307/4899849

extension HexString on String {
int getHexValue() => int.parse(replaceAll('#', '0xff'));
}

用法:

'#b74093'.getHexValue()
小开

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

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

提交答案