Colors are the primary element of an aesthetic UI. The use of right colors creates a visually appealing UI which has significant impact on grabbing the users’ attention. Many brands also have their own color palette which helps them form their own brand identity. In short, colors play a vital role in determining the quality of mobile apps. In this guide, we’ll walk you through the usage of RGB and Hex Color codes in Flutter.
P.S If you do not already have Flutter development environment setup, Click for Flutter installation Guide.
Flutter, being a UI framework, comes with its own color palette. The intensity of each color depends on the shade integer value passed with the color. Example: Colors.blue[400] or Colors.blue.shade400. You can check out the flutter color palette here.
Despite the available colors from the framework, we often require colors that are outside of those available to us. But how are we going to use those colors? Fortunately, Flutter also makes it possible to use colors using RGB values and hexadecimal values and that’s what this article is all about.
RGB Color Codes
Flutter’s Color class has a fromRGBO() method which makes it possible to use RGB values. The method takes four arguments, the first one being red value, second green value, third blue value and the final value being color opacity(0 to 0.1).
Example: Color.fromRGBO(43, 143, 161, 1.0)
Here, 43 represents red value, 143 represents green value, 161 represents blue value and 1.0 represents the color opacity.
Hex Color Codes
The Color class constructor takes hex value and renders the color. Let’s take an example color code #03b1fc. In flutter, we specify the hex color as:
Color(0xff03b1fc)
In the above color code, we remove the “#” sign which otherwise is used to represent the hex code. It is replaced by “0x“. “0x” indicates that the color code is hexadecimal. “ff” indicates the opacity of the color where “ff” represents 255, which means full opacity.
Note that if we omit the “ff“, the color becomes invisible because dart automatically sets the opacity to 0% if not specified.
The “ff” is the opacity value of the color. It can be replaced with other opacity values. You can find the list of opacity values here. The color can also be represented using capital letters like Color(0XFF03B1FC).
I hope this article helped you use RGB and hex color codes in flutter.
Further read: Adding animation in Flutter Apps using Lottie.