How do I use hexadecimal color strings in Flutter?

This was the solution for me:

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

It was the only way that didn't require additional steps.

As the [Color][1] constructor does not support **hexadecimal string**, so we should find other alternatives.

**There are several possibilities:**

**1-** The first one is to create a small function that will allow you ***to convert a color hex-string to a Color object***.

**Code:**

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

**Usage**:

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

**2-** The second possibility is to use the **[supercharged][2] package.** [Supercharged][2] brings all the comfort features from languages like Kotlin to all Flutter developers.

Add the dependency supercharged: `^1.X.X` (find recent version) to your project and start using Supercharged everywhere:

import 'package:supercharged/supercharged.dart';

Now ,transform any String to colors

**Code :**

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

You can also use the **[hexcolor][3]** package which is also great.

[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

There is another solution. If you store your color as a normal hexadecimal string and don't want to add opacity to it (leading "FF"):

1) Convert your hexadecimal string to int
To convert a hexadecimal string to an integer, do one of the following:

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

or

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

as a prefix of 0x (or -0x) will make *int.parse* default to a radix of 16.

2) Add opacity to your color via code

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

The `Color` class expects an ARGB integer. Since you try to use it with an *RGB* value, represent it as *int* and prefix it with `0xff`.

Color mainColor = Color(0xffb74093);

---

If you get annoyed by this and still wish to use strings, you can extend `Color` and add a string constructor

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


Usage

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

Import the new class and use it like this:

HexToColor('#F2A03D')

You can click on Color Widget and it tells you with much deeper information what those letters stand for.

You can also use the Color.fromARGB() method to create custom colors which is much easier to me. Use the [Flutter Doctor Color Picker][1] website to pick any color you want for your Flutter application.

[1]:

[To see links please register here]

You can use the package [from_css_color][1] to get `Color` out of a hexadecimal string. It supports both three-digit and six-digit RGB hexadecimal notation.

```dart
Color color = fromCSSColor('#ff00aa')
```

For optimisation sake, create a Color instance once for each color and store it somewhere for later usage.

[1]:

[To see links please register here]

Use [hexcolor][1] for bringing hexadecimal colors to the Dart hexcolorPlugin:

hexcolor: ^2.0.3

**Sample usage**

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

[1]:

[To see links please register here]

The easiest way is to convert it into an integer. For example, *#BCE6EB*. You would add *0xFF* and you would then remove the hashtag making it:

0XFFBCE6EB

Then let’s say you were to implement it by doing:

```backgroundColor: Color(0xffbce6eb)```

If you can only use a hexadecimal then I suggest using the [Hexcolor][1] package.

[1]:

[To see links please register here]

If you need a hexadecimal color desperately in your application, there is one simple step you can follow:

1. Convert your hexadecimal color into RGB format simply from [here][1].
2. Get your RGB values.
3. In Flutter, you have an simple option to use RGB color:

``` Color.fromRGBO(r_value, g_value, b_value, opacity)``` will do the job for you.
4. Go ahead and tweak *O_value* to get the color you want.

[1]:

[To see links please register here]