Do you want to prettify your Flutter Project using Hex color strings but need to know the how-to? We’ve got you covered!
Colors add detail to your UI/Ux designs by highlighting their inner characteristics. Flutter enables such cosmetics by assigning the design-related jargon to a design file. Just like any other web-based color identification method, it contains a bunch of hex codes. 😬
However, you’re technically not looking for codes but the color itself. Plus, there seems to be no apparent way of inserting such colors inside your script. That’s kind of troublesome…
Luckily, using hex color strings in Flutter isn’t nearly as complex as one might believe; it’s pretty simple and can be used almost anywhere in your code! 😎
Believe it or not, Flutter has a defined color class that only accepts integers as parameters. This essentially means it won’t conventionally accept alphabetical colors. Consequently, your highly-sophisticated hex codes are no good as well.
Having said that, the key still lies in the latter part, i.e. hex codes. You just need to change your approach to make it work.
With that said, this guide will showcase everything you need to know regarding hex color strings in Flutter. So, with that said, let’s jump right in!
Table of Contents
How to Use Hex Color Codes In Flutter?
Perform the following steps In order to make hex color codes work in Flutter:
Step 1: Choosing a Hex Code
You don’t really need to think very hard about this one. Just pick a color you want to use and copy its hex code.
If you’re having difficulty determining hex codes from images 😵, we recommend you use online color picker tools since they’re convenient and free to use!
Step 2: Formatting the Hex String
You need to replace the # sign of the hex code with 0xFF in order to create a Flutter-useable hex string.
For example, the hex code #909090 will look like 0xFF909090. Consequently, any other hex code will also follow this logic.
Simply encapsulate this information in the Color class of Flutter, and you’re good to go! 🤓
Here’s how that will look:
backgroundColor: Color(0xFF909090)
You can change this opacity metric by changing the FF (100%) to one of the following:
| Opacity | Identifier |
| 95% | F2 |
| 90% | E6 |
| 85% | D9 |
| 80% | CC |
| 75% | BF |
| 70% | B3 |
| 65% | A6 |
| 60% | 99 |
| 55% | 8C |
| 50% | 80 |
| 45% | 73 |
| 40% | 66 |
| 35% | 59 |
| 30% | 4D |
| 25% | 40 |
| 20% | 33 |
| 15% | 26 |
| 10% | 1A |
| 5% | 0D |
| 0% | 00 |
Conclusion
In essence, the Color class is the one responsible for providing the functions needed to use the hex codes of your choice. There are a plethora of transparency prefixes to ensure pinpoint accuracy, so rest assured! 🤓
You always have the option to browse your own color palette. Having said that, you generally don’t need to go that far since the preset library is vast.
Be sure to use the mentioned format to make your life easier. The prefixes can be a pain to navigate through, so we’ve compiled almost all of them here!
In case you’re having difficulty deciding your ideal color style, it might be a good idea to test some sample palettes until you find the one you’re looking for. 🧐
Lastly, let us know in the comments:
- Were you able to use hex color strings in Flutter?
- Have you found a simpler library that can do all this and more with less effort?
- What kind of project are you intending to create using Flutter?
- Are there any other points or useful information you believe we should’ve mentioned?
Feel free to share this article amongst your friends and peers so that they can code faster, smarter and simpler!
