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

时间：2018-04-28 21:25:28

标签： colors dart flutter

如何将 #b74093 中的十六进制颜色字符串转换为Flutter中的Color？

32 个答案:

答案 0 :(得分：113)

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

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

final color = const Color(0xffb74093);

这些字母可以选择是否大写：

final color = const Color(0xFFB74093);

答案 1 :(得分：46)

如果您要使用＃123456格式的十六进制颜色，则非常容易使用， 创建一个Color类型的变量，并为其分配以下值。

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% — 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

答案 2 :(得分：40)

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

答案 3 :(得分：25)

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

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

#b74093 在 Flutter 中会变成 Color(0xffb74093)

#B74093 在 Flutter 中会变成 Color(0xFFB74093)

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

Hexadecimal colors example with all opacity types in Dartpad

Enter image description here

答案 4 :(得分：13)

感谢您提出这个问题，简单的解决方案如下：

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

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

享受代码并帮助他人:)

答案 5 :(得分：12)

要将十六进制字符串转换为int，请执行：

(conj '(1) 2) ; '(2 1)

(conj [1] 2) ; [1 2]

致电示例：

conj

答案 6 :(得分：10)

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

不知道为什么要关闭它，这是我的解决方法。
唯一不需要额外步骤的方式

答案 7 :(得分：9)

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

答案 8 :(得分：9)

您可以使用此

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

答案 9 :(得分：8)

不需要使用函数。

例如，使用颜色代码为容器指定颜色：

Container
(
    color:Color(0xff000000)
)

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

答案 10 :(得分：8)

使用hexcolor将十六进制颜色带入飞镖hexcolorPlugin 

hexcolor: ^1.0.4

示例用法 

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

答案 11 :(得分：8)

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

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

您可以像这样使用它：

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

答案 12 :(得分：6)

在文件中添加此功能-


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

答案 13 :(得分：5)

供一般参考。使用 Supercharged 库更简单。尽管您可以对上述所有解决方案使用扩展方法，但您会找到实用的用户库工具包。

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

更容易，对吧？

Supercharged

答案 14 :(得分：4)

简便方法：

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

用法：

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

答案 15 :(得分：4)

由于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- 第二种可能性是使用 supercharged 包。 Supercharged 将 Kotlin 等语言的所有舒适功能引入所有 Flutter开发人员。

将依赖 supercharged：^1.X.X（查找最新版本）添加到您的项目并开始在任何地方使用 Supercharged：

import 'package:supercharged/supercharged.dart';

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

代码：

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

您也可以使用 hexcolor 包，这也很棒。

答案 16 :(得分：4)

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

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

答案 17 :(得分：3)

最简单的方法是将其转换为整数。例如＃bce6eb。您将添加0xff，然后删除使其成为标签＃

0xffbce6eb

然后可以说您要通过实施来实现

backgroundColor: Color(0xffbce6eb)

如果只能使用十六进制，则建议使用Hexcolor软件包 https://pub.dev/packages/hexcolor

答案 18 :(得分：3)

"#b74093"？好的......

到HEX Recipe 

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

答案 19 :(得分：3)

不幸的是，Flutter中的Color类构造函数不接受简单的十六进制 string （类似于CSS中的#bfeb91）。

相反，它需要像0xFFBFEB91这样的整数。

这是将十六进制字符串转换为整数

简单功能

为该函数指定一个十六进制字符串，它将为您返回颜色！

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

像这样使用它

Text(
  'Hello World',
  style: TextStyle(backgroundColor: _getColorFromHex('ff00aa')), // or 'bfeb91', or 'ffbfeb91'
),

作为字符串扩展名

利用Dart扩展的功能，我们可以使用返回String的函数来扩展Color：

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

像这样使用它

Text(
  'Hello World',
  style: TextStyle(backgroundColor: '#bfeb91'.toColor()), // or 'bfeb91', or 'ffbfeb91'
),

答案 20 :(得分：2)

在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 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

答案 21 :(得分：2)

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,
  )
)

答案 22 :(得分：1)

如果您的颜色是＃e41749，只需在其0xff之前添加

因此您可以将其编写为：

颜色：颜色（0xffe41749）;

答案 23 :(得分：1)

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')

答案 24 :(得分：0)

您可以单击Color Widget，它会在更深入的信息中告诉您这些字母的含义。您还可以使用Color.fromARGB（）方法来创建自定义颜色，这对我来说要容易得多。使用Flutter Doctor Color Picker网站为您的抖动应用程序选择所需的任何颜色。

答案 25 :(得分：0)

这样，您的十六进制为052568 => 0xFF + 052568 => 0xFF052568

问题是您需要不透明度，该不透明度位于颜色整数的高字节中。因此，我们必须添加0xFF000000。

答案 26 :(得分：0)

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

Color color = fromCSSColor('#ff00aa')

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

答案 27 :(得分：0)

由于Color构造函数不支持十六进制字符串，因此我们应该找到其他替代方法。

有几种可能性：

1-第一个是创建一个小的函数，该函数将允许您 将彩色十六进制字符串转换为Color对象

代码： 

   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-第二种可能性是使用 supercharged软件包。 Supercharged将Kotlin等语言的所有舒适功能都引入了Flutter开发人员。

将supercharged依赖项：^1.X.X（查找最新版本）添加到您的项目中，并开始在各处使用Supercharged：

import 'package:supercharged/supercharged.dart';

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

代码： 

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

您还可以使用 hexcolor 软件包，该软件包也很棒。

答案 28 :(得分：0)

如果您在应用程序中迫切需要十六进制颜色，您可以执行一个简单的步骤：

  1. 只需从 here 将十六进制颜色转换为 RGB 格式。

  2. 获取您的 RGB 值。

  3. 在 Flutter 中，您有一个简单的选项来使用 RGB 颜色：

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

  4. 继续调整 O_value 以获得您想要的颜色。

答案 29 :(得分：0)

const appBackground =颜色（0xffdf7599）;

df7599是您颜色的十六进制代码

答案 30 :(得分：0)

我已经创建了这个 String 类的 Flutter 扩展函数.. 如果你也讨厌 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...

答案 31 :(得分：0)

// 调用此行设置颜色
颜色：HexColor(HexColor.Primarycolor)

我创建了一个类 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));
}
相关问题
最新问题