How to convert a hexadecimal color string to a color?

Sometimes Flutter developers may want to convert a hexadecimal color string to color in Flutter. They may want to use a HEX color code in Dart. So, in this article, we will see how to convert a hexadecimal color string to a color.

How to convert a hexadecimal color string to a color?

In Flutter, the Color class only accepts integers as parameters. Otherwise, you can use the named constructors fromARGB and fromRGBO. So, developers only need to convert the string to an integer value. Also, you need to take care of the opacity which needs to be specified. Full opacity is represented by the hexadecimal value FF. This will leave us with 0xFF.

After that, the only thing to do is to append the color string like this:

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

In case you want to use percentage opacity values, replace the first FF with the values from the following table.

Hex Opacity Values

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

Extension class

Also, you can create an extension for the color class. This will let you use hexadecimal color strings to create an object.

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

You can also declare fromHex method in a mixin or class. This is because the HexColor name needs to be specified in order to use it. But the extension is useful for the toHex method, which can be used implicitly. Below is an example that you can refer to:

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

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

Some Disadvantages of using hex strings

These answers here show that how you can dynamically create a color from a hex string. However, doing this means that the color cannot be a const. Also, developers generally assign colors the way we explained in the first part of this answer. This way is more efficient when instantiating colors a lot, which is usually the case for Flutter widgets.

You can also have a static method extension. But you just cannot call them using the class that is extended. For example, HexColor.fromHex will work but Color.fromHex will not work.

Conclusion:

Thanks for being with us !!!

So, in this article, we have been through how to convert a hexadecimal color string to color in Flutter. Also, we will keep bringing more articles on Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.