The Right Way to Convert Hex to Flutter Color

Are you searching for a way to use hexadecimal color strings in your Flutter app? Look no further! There’s a unique approach to specifying Flutter colors using hex codes. In this article, I’ll guide you through a quick and easy process of converting hex to Flutter color, with a detailed explanation to ensure you fully understand the concept.

What is the Problem with Hex String in Flutter?

If you encounter an error while using a hexadecimal string in the Color constructor like this, here is what may have caused it.

Now, I will walk you through the simple steps to use a hexadecimal string as a Flutter color.

How to Convert Hex to Flutter Color

1st Way: Flutter Default Method

The Color class in Flutter has a specific parameter requirement, accepting only integers. However, users can also use named constructors such as fromARGB and fromRGBO. To convert the string #0669FF to an integer value, it’s essential to remember that opacity must always be specified. The full opacity, represented by the hexadecimal value FF, equals 255.

Step 1: Remove the # from the hex code.

Step 2: Add 0xFF before the hex code.

It will look like this – 0xFF0669FF. This example gives you more understanding.

Container(
    height: 200,
    width: 200,
    color: const Color(0xFF0669FF), // this is how can assign color object
)

It’s worth noting that the color integer is case-insensitive, meaning you can use 0xff0669ff.

Consider this table if you are interested in learning more about percentage opacity values that are defined by the prefix “FF” in hexadecimal color codes.

2nd Way: By Creating an Extension Class

What if you wish to use a hexadecimal string like this in Flutter? Well, you can! To do so, you can utilize the Flutter feature called “extensions”. With extensions, you can easily use hex strings in your Flutter project. Let’s dive into the details.

Step 1: Create a file that names you like, I name it hex_to_color.dart

Step 2: Put this code into that file

extension HexToColor on String {
  Color get c {
    final 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));
  }
}

Extensions are a powerful feature in Flutter that allows developers to add functionality to existing classes or types, without having to create a new subclass or modify the original code. This feature is handy for adding custom methods or properties to commonly used classes, such as String or Color, as it simplifies and streamlines the coding process. By using extensions, developers can write cleaner, more concise code, saving time and effort in their Flutter projects.

Step 3: Now use the hex string like this in your app.

Container(
    height: 200,
    width: 200,
    // by adding [.c] after your string will return it color by our extension class
    color: "#0669FF".c, 
)

Why use the Color() constructor instead of extensions?

I have provided here a demonstration of the creation of a Color instance through a hex string. Nevertheless, this approach prohibits color from being a constant.

Hence, it is recommended to assign colors as previously explained in the initial part of this article. This method is more efficient for instantiating colors frequently, a common occurrence in Flutter widgets.

Conclusion

In conclusion, converting hex colors to Flutter Colors is crucial to designing a visually appealing and dynamic Flutter app. While there are multiple ways to achieve this, we have explored two of the most effective methods – using the built-in `Color()` constructor and utilizing extensions. 

Both methods have their advantages and can simplify the code-writing process to a great extent. By choosing the right approach for your Flutter project, you can ensure that your app’s color scheme is both aesthetically pleasing and easily manageable.

Did you enjoy reading our article on The Right Way to Convert Hex to Flutter Color? If so, please share it with your fellow Flutter developers. If you have any questions regarding Flutter, feel free to leave a comment below. For more informative articles on Flutter, check out IntendStuff.