2 Ways to Use Hexadecimal (Hex) Color Code String in Flutter (2022)

While developing the Fluter app, you must be referring to a design file to create the UI for the app. Most of the design file allows you to copy the color in Hexadecimal (Hex) color code string. Even if you are taking colors from any website (Using google chrome inspect) it gives you the hex code for the color. so how do you use the Hexadecimal (Hex) Color Code String in the Flutter app? In this tutorial, we’ll learn the 2 ways to use the Hexadecimal (Hex) Color Code String in the Flutter.

Here’s what we’ll cover:

• What is the Hexadecimal Color Code String
• The problem
• How to use Hexadecimal (Hex)Color Code Strings in Flutter
• Changing the Opacity

What is the Hexadecimal Color Code String

Hexadecimal color code is a way of describing the color. It is represented in the format of #RRGGBB where RR represents Red color, GG represents the Green color and BB represents the Blue color.

Each of the color pairs in hex code can range from 00 to FF where 00 represents no color and FF indicates the color with full intensity.

The Problem

The problem with the Hex color code in Flutter is that you can’t use it directly like this:

backgroundColor: Color('#6ae792'), // Gives error

The Color class in Flutter only accepts integers as parameters. So we need some way to use/convert the hex code #6ae792 into the integer format that the Color class can understand. 

How to use Hexadecimal (Hex) color code strings in Flutter

There are two ways you can use the Hex color code in Flutter.

Steps to use Hexadecimal (Hex) Color Code Strings in Flutter

Step 1: Remove the # sign.

Step 2: Add 0xFF at the beginning of the color code.

Step 3: Place it inside the Color class like this Color(0xFFbfeb91).

backgroundColor: Color(0xFFbfeb91), // Will work

Steps to use Hexadecimal (Hex) Color Code using Extention

Step 1: Create a new file extentions.dart under the lib folder and add the below code.

import 'package:flutter/material.dart';
extension ColorExtension on String {
  toColor() {
    var hexString = this;
    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));
  }
}

The above code replaces the # with ff and converts a string into the integer value. 

Step 2: To use the extension, simply add .toColor() at the end of the hex color like this ‘#bfeb91’.toColor().

Changing the Opacity

The FF or ff, in the beginning, indicates the color is opaque. Modifying this value will change the opacity of the color.

You can use any value from the below to change the opacity.

100% - FF
95% - F2
90% - E6
85% - D9
80% - CC
75% - BF
70% - B3
65% - A6
60% - 99
55% - 8C
50% - 80
45% - 73
40% - 66
35% - 59
30% - 4D
25% - 40
20% - 33
15% - 26
10% - 1A
5% - 0D
0% - 00

Here’s how it works:

Conclusion

In this tutorial, we learned 2 Ways to Use Hexadecimal (Hex) Color Code String in Flutter with additional knowledge on what is Hex color code and how to change the opacity.

More Articles: