How to Use Hexadecimal Color Strings in Flutter?

#flutter #beginners #tutorial #programming

While the new technologies are opening the way for coding, more than 42% of the global developers are using Flutter. It comes as the open-source software development kit (SDK) from technical giant Google, free for all developers. It has a single codebase that helps developers create scalable and high-performance applications with functional user interfaces for IOS or Android. Hence, the run-for-hire flutter developer is at the fastest speed.

Not surprisingly, Flutter has crossed the famous React Native to become the first preference for mobile app development. While building apps using Flutter, developers have to refer to a design file to create a user interface for the app. The easiest way is to copy the color in the Hexadecimal color code string. Let us understand all about using these hexadecimal color strings in Flutter.

How does Flutter work?

It is easy to understand Flutter working. It is a layered system with a dedicated framework, platform-specific embedded, and the engine. All Flutter applications are created using Google’s Dart object-oriented programming language. The flutter engine is written in C or C++, and the Skia library forms the Flutter graphics capabilities.

Dart Framework: It contains material, Cupertino, Widgets, Rendering, Animation, Painting, Gestures, Foundation, etc.
Engine: It contains Service Protocol, Composition, Platform Channels, Dart Isolate Setup, Rendering, System Events, Dart Runtime Management, Frame Scheduling, Asset Resolution, Frame Pipelining, Text Layout, etc.
Embedder: It contains Render Surface Setup, Native Plugins, App Packaging, Thread Setup, Event Loop Interop, etc.

Benefits of Flutter

Some of the key advantages of using Flutter include:

It offers an unbeatable user experience. All the UI created in Flutter are functional, attractive, and well-designed.

Highly scalable. Developers can quickly add or remove features in Flutter applications. Further, the real-time database updates make it easy for the developers to reduce downtime.

Easy to learn and easy to use. Flutter is a simple application development language. Further, Flutter has excellent documentation, and different platforms use Flutter to create applications.

Speedy application development. Cross-platform mobile application development is fast and straightforward due to different features. Hence, it is easy to create iOS and Android applications.

What are hexadecimal color strings in Flutter?

The hexadecimal color strings are the methods of describing the colors. The format of these strings is #RRGGBB, where RR stands for red color, GG stands for Green color, and BB stands for Blue color. Every color pair in hex code ranges from 00 to FF, where 00 stands for no color while FF stands for full intensity.

The issue with the hexadecimal color code in Flutter is that it is not possible to use it directly. It is because the color class in Flutter accepts integers as parameters only. Hence, it is required to convert the hex code into integer format, which the color class can understand. Let us now move on to the different steps to use hexadecimal color strings in Flutter.

Ways to use hexadecimal color strings in Flutter

Developers can adopt any of the three ways to use hexadecimal color strings in Flutter. These two methods are:

1. Without using extension:
Start by removing the “#” sign.
Add “0xFF” at the Start of the color code.
Put it in the color class like- “Color( 0xFF112233).”
“backgroundColor: Color(0xFF112233)”

2. Without using extension:
Using the extension file in Flutter makes it easy to use hexadecimal color strings. The simple steps for the same are:

Starts by creating a new file, “extension.dart” under the library folder and adds the code where “#” is replaced with “ff.” The color string is converted into the integer value.
Use extension and add .toColor() at the end of the hex color, like- “#ac1291”.toColor().

It is easy to change the opacity of color in Flutter codes. All you need to do is choose the values of “FF or ff” according to the required opacity.

3. Using main.dart file:
It is easy to use the color class of Flutter to pass the hex color in it. The quick steps for the same are:

Importing the material.dart package in the app’s main.dart
Starting with the importing of material.dart package is easy to import material.dart in the main.dart file or any file where you need to use hex color code. It is like-

import”package:flutter/material.dart”;

Calling MyApp in the run-app function
The next step is to call the main class MyApp using runApp() Function. It is like- void main() 🡺 runApp(MyApp());

Creating main class named MyApp
It is important to create the main class named MyApp. It is like- class MyApp extends StatelessWidget { }

Using hex color to our FloatingActionButton widget
Source code for color_coding.dart file

import 'package:codereview/extension.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(' hexadecimal color'),
      ),
      body: const Center(child: Text("Welcome,Hello Flutter Developers..!")),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: "button",
        child: const Icon(Icons.star),
        backgroundColor:'#ac1291'.toColor(),
      ),
    );
  }
}
Source code for extension.dart file:

import 'package:flutter/material.dart';

extension ColorExtension on String {
  toColor() {
    var hexStringColor = this;
    final buffer = StringBuffer();

    if (hexStringColor.length == 6 || hexStringColor.length == 7) {
      buffer.write('ff');
      buffer.write(hexStringColor.replaceFirst("#", ""));
      return Color(int.parse(buffer.toString(), radix: 16));
    }
  }
}

Output:

Advantages of using hexadecimal color strings in Flutter
Some of the top benefits of using hexadecimal color strings in Flutter include:

Using hexadecimal color strings in Flutter eliminates the need for binary codes and hence offers a human-friendly representation of values.

There is no difference between the RGB and HEX colors as both are the different ways of communicating blue, green, or red color values.

Disadvantages of using hexadecimal color strings in Flutter
Some of the points of concern while using hexadecimal color strings in Flutter include:

While creating a “color” from the hex string, the color string doesn’t remain to be a “const.”

Assigning the colors according to the instantiating colors efficiently to improve the project standards is important.

Wrapping Up:

Hence, it is easy to use hexadecimal color strings in Flutter. While it has its advantages and disadvantages, it is easy for any developer to understand the source codes. Starting from the definition of a hexadecimal color code string, the process of using it, and changing the opacity, it is easy to create amazing projects in Flutter.