How to Use Hexadecimal Color Strings in Flutter?

• Flutter
• Flutter Widget Guide

In Many Flutter  Mobile Application, you might have seen at the time of adding particular data users may want to apply specific colors to that specific field so how to Use a Hexadecimal Color Strings to a Color in Flutter?

How to Use Hexadecimal Color Strings in Flutter?

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

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

The code snippet will look like below:

void main() {
  final Color color = HexColor.fromHex('#aabbcc');
  print(color.toHex());
  print(const Color(0xffaabbcc).toHex());
}

The Color class expects an ARGB integer. Since you try to use it with 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"); //

A Simple Function without using a class:

Color _colorFromHex(String hexColor) {
  final hexCode = hexColor.replaceAll('#', '');
  return Color(int.parse('FF$hexCode', radix: 16));
}

You can use it like this:

Color color1 = _colorFromHex("b74093");
Color color2 = _colorFromHex("#b74093");

To Convert from Hexadecimal String to int, do:

int hexToInt(String hex)
{
  int val = 0;
  int len = hex.length;
  for (int i = 0; i < len; i++) {
    int hexDigit = hex.codeUnitAt(i);
    if (hexDigit >= 48 && hexDigit <= 57) {
      val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
    } else if (hexDigit >= 65 && hexDigit <= 70) {
      // A..F
      val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
    } else if (hexDigit >= 97 && hexDigit <= 102) {
      // a..f
      val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
    } else {
      throw new FormatException("Invalid hexadecimal value");
    }
  }
  return val;
}

Call example :

Color color=new Color(hexToInt("FFB74093"));

In Flutter it creates color from RGB with alpha, use

return new Container(
  color: new Color.fromRGBO(0, 0, 0, 0.5),
);

How to use hex-color:

return new Container(
  color: new Color(0xFF4286f4),
);
//0xFF -> the opacity (FF for opaque)
//4286f4 -> the hex-color

Hex-color with opacity:

return new Container(
  color: new Color(0xFF4286f4).withOpacity(0.5),
);

Convert a color hex-string to a Color object.

Color getColorFromHex(String hexColor) {
  hexColor = hexColor.toUpperCase().replaceAll('#', '');

  if (hexColor.length == 6) {
    hexColor = 'FF' + hexColor;
  }

  return Color(int.parse(hexColor, radix: 16));
}

Example usage

Text(
  'hello world',
  style: TextStyle(
    color: getColorFromHex('#aabbcc'),
    fontWeight: FontWeight.bold,
  )
)

Use hexcolor for bringing hex colors to dart hexcolorPlugin

hexcolor: ^3.0.1

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

Conclusion:

In this article, We have been through the use of Hexadecimal Color Strings in Flutter?

Keep Learning !!!
Keep Fluttering.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.