How do I convert a hexadecimal color string like #b74093
to a Color
in Flutter?
I want to use a HEX color code in Dart.
In Flutter the Color
class only accepts integers as parameters, or there is the possibility to use the named constructors fromARGB
and fromRGBO
.
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:
const color = const Color(0xffb74093); // Second `const` is optional in assignments.
The letters can by choice be capitalized or not:
const color = const Color(0xFFB74093);
Starting with Dart 2.6.0
, you can create an extension
for the Color
class that lets you use hexadecimal color strings to create a Color
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')}';
}
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:
void main() {
final Color color = HexColor.fromHex('#aabbcc');
print(color.toHex());
print(const Color(0xffaabbcc).toHex());
}
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.
You can't have static method extension in dart yet github.com/dart-lang/language/issues/723
@ŁukaszWiśniewski Yes, you can ;) You just cannot call them using the class that is extended (
HexColor.fromHex
works butColor.fromHex
does not).I'm just surprised that you can pass 0xFF as part of an int
@HamishJohnson
0x
just indicates that the following digits will be parsed as a hexadecimal 🙃