How to use Hexadecimal colors in Flutter

Colors play a vital role in enhancing the visual appearance of your Flutter applications. Hexadecimal colors are extensively used and offer a convenient way to set colors in your applications. In this post, we will explore various methods to use hexadecimal colors in Flutter applications. We will cover the following approaches: using Flutter's Color class, converting from a hexadecimal string, implementing extensions, and using external packages.

Setting up

Let us begin with setting up our main.dart file as follows:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hex colors demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hex Colors Demo'),
          backgroundColor: Colors.red,
        ),
      ),
    );
  }
}

In the above code snippet, we display a color using the Colors class. Even though this works great, we want to have more flexibility by using hexadecimal colors.

1. Using Flutter's Color class

The simplest way to use hexadecimal colors in Flutter is by using the default Color class. Inside the Color class, you can pass an int value representing the hexadecimal color.

To do this, prefix your hexadecimal color with 0xFF, followed by the hexadecimal color without the hashtag #. For example, if you want to use the hexadecimal color #008744, you have to pass 0xFF008744 as the argument of the Color class.

appBar: AppBar(
  title: Text('Hex Colors Demo'),
  backgroundColor: Color(0xFF008744),
),

As you can see we successfully displayed a green color using the default Color class in Flutter

2. Hexadecimal String Conversion

Another approach is to convert the hexadecimal string into a Color object. To achieve this you can use the int.parse function in the argument of the Color constructor. See the code below:

appBar: AppBar(
  title: Text('Hex Colors Demo'),
  backgroundColor: Color(
    int.parse('#0057E7'.replaceAll('#', 'FF'), radix: 16),
  ),
),

1. The int.parse() function is used to convert the hexadecimal color string into an int value. The radix parameter is set to 16, indicating that the string represents a hexadecimal value.
2. Before parsing, the replaceAll() function is used to remove the # symbol from the hexadecimal color string and replace it with FF. This is because the Color constructor expects a value in the format of 0xAARRGGBB, where AA represents the alpha value and RR, GG, and BB represent the red, green, and blue color channels.
3. The resulting int value is then passed as an argument to the Color constructor, creating a Color object with the corresponding hexadecimal color.

To simplify this process, we can create an extension on the Color class, as shown in the code snippet below. The extension, that we named HexColor, adds a static function called fromHex() that takes a hexadecimal color string as input and returns the corresponding Color object.

import 'package:flutter/material.dart';

extension HexColor on Color {
  static Color fromHex(String hex) {
    return Color(
      int.parse(hex.replaceAll('#', 'FF'), radix: 16),
    );
  }
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hex colors demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hex Colors Demo'),
          backgroundColor: HexColor.fromHex('#ffa700'),
        ),
      ),
    );
  }
}

So far this is the better solution because we only have to create the extension once and we can use it anywhere in our application. Also, it makes it very easy to read and convenient. Now we only have to pass the hexadecimal string into our function.

3. Hexadecimal hexcolor Package

If you prefer a ready-to-use solution, you can use the hexcolor package, which simplifies working with hexadecimal colors in Flutter. Follow these steps to use it:

1. Execute flutter pub add hexcolor add the hexcolor package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  hexcolor: ^3.0.1

2. Import the package in your Dart file:

import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

3. Use the HexColor class to create a Color object from a hexadecimal color:

appBar: AppBar(
  title: Text('Hex Colors Demo'),
  backgroundColor: HexColor('#40e0d0'),
),

If you do not mind using an external package then this is a very nice approach. It is very easy to use and it works out of the box.

Conclusion

This post explained different ways to use hexadecimal colors in Flutter. It covered using Flutter's Color class, converting a hexadecimal string using an extension, and using the hexcolor package. These methods offer flexibility and convenience for setting colors in Flutter applications. Experiment around with these methods and use the one that fits your need.

Tags

• Flutter
• Dart