Here's how you can do it:
```
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')}';
}
```
In Flutter, the **[`Color` class](https://api.flutter.dev/flutter/dart-ui/Color-class.html)** only accepts ***integers** as parameters*, or there is the possibility to use the named constructors [`fromARGB`](https://api.flutter.dev/flutter/dart-ui/Color/Color.fromARGB.html) and [`fromRGBO`](https://api.flutter.dev/flutter/dart-ui/Color/Color.fromRGBO.html).
So we only need to convert the string `#b74093` to an integer value. Also we need to respect that **opacity** always needs to be specified.
`255` (full) opacity is represented by the hexadecimal value `FF`. This already leaves us with **`0xFF`**. Now, we just need to append our color string like this:
```dart
const color = const Color(0xffb74093); // Second `const` is optional in assignments.
```
The letters can by choice be capitalized or not:
```dart
const color = const Color(0xFFB74093);
```
---
If you want to use *percentage opacity values*, you can replace the first `FF` with the values from [this table](https://gist.github.com/creativecreatorormaybenot/8710f6f752f6a0f2cae13abb538f0e8e#hex-opacity-values) (also works for the other color channels).
## Extension class
[Starting with Dart `2.6.0`, you can create an `extension`](https://stackoverflow.com/a/58288266/6509751) for the `Color` class that lets you use hexadecimal color strings to create a `Color` object:
```dart
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')}';
}
```
The `fromHex` method could also be declared in a `mixin` or `class` because the `HexColor` name needs to be explicitly specified in order to use it, but the extension is useful for the `toHex` method, which can be used implicitly. Here is an example:
```dart
void main() {
final Color color = HexColor.fromHex('#aabbcc');
print(color.toHex());
print(const Color(0xffaabbcc).toHex());
}
```
### Disadvantage of using hex strings
Many of the other answers here show how you can dynamically create a `Color` from a hex string, like I did above. However, doing this means that the color cannot be a `const`.
Ideally, you would assign your colors the way I explained in the first part of this answer, which is more efficient when instantiating colors a lot, which is usually the case for Flutter widgets.
