Flutter Using Hex Colors – 2 Easy Methods

Hex color is the color representation of hexadecimal colors. You may be familiar with Hex colors from the web. Here you will use the hex colors inside the flutter framework.

Here You will user Hexadecimal colors in two different ways.

  1. Use Hex Colors Basic to Advance
  2. Use hexcolor package

Use Hex Colors Basic to Advance

Here you will first use the hex color in a simple possible way. User the Flutter Color class.

Simple Hex Color Pattern:

Color(0xFF + Hex Color String) OR Color(0xff + Hex Color String)

0xFFHere FF represents the opacity of the color.
Hex Color StringActual color string that you want to user
Hex Color Scheme in Flutter

Code Example:

Color(0xFFF9FF58)

Let’s create an example app and use the above color.

App Code:

import 'package:flutter/material.dart';

class UsingHexColors extends StatelessWidget {
  const UsingHexColors({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('CodewithHussain'),
      ),
      body: Center(
        child: Container(
          height: 200,
          width: 300,
          color: const Color(0xFFF9FF58), //Check the usage
        ),
      ),
    );
  }
}

Let’s see the preview:

How to use Hex Colors in Flutter
Using Hex Colors in Flutter

Use Extension Method For Reusability

You can use the extension method of Dart for making code more maintainable and reusable.

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

Just place the extension method on your file. And now you have the power to convert any string Hex Color to the Color Object that Flutter uses.

Usage:

'#DFBC1C'.toColor(),

Complete 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));
  }
}

class UsingHexColors extends StatelessWidget {
  const UsingHexColors({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('CodewithHussain'),
      ),
      body: Center(
        child: Container(
          height: 200,
          width: 300,
          color: '#DFBC1C'.toColor(),
        ),
      ),
    );
  }
}

Preview:

Using Dart extensions to convert String to Color in Flutter

Create Custom HexColor Class

Another approach that can increase reusability is to use a custom class that can convert the input hex color string to the Flutter Color object.

Create a HexColor class.

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

Use this HexColor class.

HexColor('#ADCF1C'),

Let’s check the complete code:

import 'package:flutter/material.dart';

class UsingHexColors extends StatelessWidget {
  const UsingHexColors({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('CodewithHussain'),
      ),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          color: HexColor('#ADCF1C'),
        ),
      ),
    );
  }
}

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

Let’s preview the code:

Use Hex Colors in Flutter using Custom Class
Use Hex Colors in Flutter using Custom Class

Use hexcolor package

Here you can see how you can use Hex colors in flutter using hexcolor package.

Let’s first install the package by running this command in the terminal

flutter pub add hexcolor

Or you can specify dependencies in the pubspec.yaml file dependencies

dependencies:
  hexcolor: ^2.0.7

import the dependencies

import 'package:hexcolor/hexcolor.dart';

Now let’s use it inside the app

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

class UsingHexColors extends StatelessWidget {
  const UsingHexColors({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('CodewithHussain'),
      ),
      body: Center(
        child: Container(
          height: 200,
          width: 200,
          color: HexColor('#f6abb6'),
        ),
      ),
    );
  }
}

Preview:

How to use hex Color in Flutter by using Hex Color Package
Using Hex color by using package in Flutter

Conclusion:

You explore how you can use hex colors in a flutter by using a different method. You use the simple native flutter method, extension method, and custom class method and at the end, you also see how you can use the dart package about Hex colors in Flutter.

Read more:

Hope this flutter tutorial was helpful! Thanks

Hussain Humdani

Hussain Humdani

while ( ! ( succeed = try() ) );