How do I use hexadecimal color strings in Flutter

Question

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.

Answer 1

To use a hexadecimal color string in Flutter, you can simply create a new instance of the Color class and pass in the hexadecimal value as a string preceded by the pound sign (#).

Here's an example of how to convert a hexadecimal color string to a Color in Flutter:

String hexColor = "#b74093";
Color color = Color(int.parse(hexColor.substring(1, 7), radix: 16) + 0xFF000000);

In the example above, we first define the hexadecimal color string as hexColor. We then convert the string to an integer using the int.parse() method and passing in the substring of the string (excluding the pound sign) and the radix (base 16 for hexadecimal). We add 0xFF000000 to set the alpha value to 255 (fully opaque) since the Color constructor requires an alpha value.

Now you can use the color variable wherever you need to set a color in your Flutter app.

Container(
  color: color,
  child: Text("Hello World"),
),

This will create a Container widget with a background color of #b74093.

To know more about Flutter, join our Flutter Certification today.