Flutter color hex : How to use hex colors in Flutter?

All the developers will be quite familiar with the hexadecimal color format or hex color format for representing color. A color hex is specified with #RRGGBB. In flutter, color is defined using a Color class. The Flutter color class accepts an immutable 32-bit color value in ARGB format.

Define custom colors in Flutter

For example, coral color with a Hex triplet #FF7F50 can be defined in Flutter color format using a 32-bit color value in ARGB format as the example below. You just need to prefix it with 0XFF to set hex color in flutter.

Color c = const Color(0xFFFF7F50);
                        

Flutter color from ARGB

You can also use named constructors like fromARGB, fromRGBO to define the color like the example shown below:

Color c = const Color.fromARGB(0xFF, 0xFF, 0x7F, 0x50); 
Color c = const Color.fromARGB(255, 66, 165, 245); 
Color c = const Color.fromRGBO(66, 165, 245, 1.0);
                        

Flutter color from hex string

If you need to use dynamic values of hexadecimal color or convert a hex string to Color, you can also define a custom class that extends Color class as shown below.

class HexColor extends Color {
  static int _getColor(String hex) {
    String formattedHex =  "FF" + hex.toUpperCase().replaceAll("#", "");
    return int.parse(formattedHex, radix: 16);
  }
  HexColor(final String hex) : super(_getColor(hex));
}

const coralColor = HexColor("#FF7F50");