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)

0xFF	Here FF represents the opacity of the color.
Hex Color String	Actual color string that you want to user

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:

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:

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 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:

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:

• Change app package name in Flutter
• Dismiss the keyboard in a flutter by tapping outside the TextField
• Flutter ListView inside Column
• Show toast in Flutter
• Change Flutter App Orientation
• Add Flutter Drop shadow to TextField

Hope this flutter tutorial was helpful! Thanks