Flutter Color Developer Guide

This guide will help you apply colors to your flutter apps using Flutter Material Colors Class and Flutter Dart:ui Color Class. You will also learn some basics about color channels, alpha channel, transparency etc.

Flutter Color Developer Guide
Flutter Color Developer Guide

Flutter uses two classes to paint colors on your app screen.

To apply colors to our flutter app we must first learn about the above two classes.

How to use Flutter Material Colors Class ?

Flutter Material Colors Class : Documentation

Also refer official class documentation with this guide to deeply understand the concept.

Let us start with the simplest way to apply colors to your flutter app widgets.

1. Colors class - Use Color using COLOR NAME (class constants)

color : Colors.orange
colors class constants
Colors Class Constants
Flutter Orange Container
Orange Container Widget UI

2. Colors class - Use Color using COLOR NAME & COLOR SHADE

Darker Orange Shade = Colors.orange[900]
Darker Orange Shade = Colors.orange[900]

How to use color shade value ?

Both of the above methods have same output

Colors.orange[900]
Colors.orange[900]
Colors.orange.shade900
Colors.orange.shade900

Both the above methods have same output

Color Shade Orange 900 UI
Color Shade Orange 900 UI

Note : Colors.orange is same as Colors.orange[500] or Colors.orange.shade500

3. Colors class - Black and White Colors

Example

White & Black Colors
White & Black Colors

Note : Transparent Color : Colors.transparent constant [invisible]

How to use Flutter Dart:UI Color Class ?

Flutter Dart:UI Color Class : Documentation

Also refer official class documentation with this guide to deeply understand the concept.

Let us first understand the basics of colors.

Color channels

Color Class Properties

- Alpha Channel of this Color is in 8 bit value- 8 bit value mean range 0 to 255 (2 raise to 8 = 256)- 0 means this color is fully transparent- 255 means this color is fully opaque- return type int

8 bit value : 0 (transparent) to 255 (opaque)

- Alpha channel of this color is in double value- double value mean ranges from 0.0 to 1.0- 0.0 means this color is fully transparent- 1.0 means this color is fully opaque- return type double

double value : 0.0 (transparent) to 1.0 (opaque)

Color represented as 32 bit value

Bits are assigned as follows :

Difference between Alpha and Opacity

Alpha sets alpha channel value in 8 bit value and Opacity sets alpha channel value in double

Let us also understand what is 0xFFFFA726 ?

Orange Int Value
Orange Int Value

In the common “hash syntax”, we represent color values as #FFA726

Using the color picker tool, we got the same color which is Colors.orange[400] using the “hash syntax” #FFA726 (Ignore the 0xFF at the begining).

If we convert hex code to decimal code we can get the RGB values : Refer RGB section in the above screenshot

Thus, 0xFFFFA726 is 0x FF(alpha) FF(red) A7(green) 26(blue)

Now, we have understood all the basics of color values and color channels we can now proceed with implementation code of the constructors of the Color class

Color Class Constructor

1. fromARGB Decimal (int) => Color.fromARGB(int a, int r, int g, int b)

color : Color.fromARGB (255,255,167,38) // fromARGB Decimal
ARGB int
ARGB int

2. fromARGB Hex

Note : Add 0x to the value, for example, Green channel (hex) A7 will become 0xA7

color : Color.fromARGB (0xFF,0xFF,0xA7,0x26) // fromARGB Hex
ARGB Hex
ARGB Hex

3. fromRGBO Decimal (int) => Color.fromRGBO(int r, int g, int b, double opacity)

color : Color.fromRGBO(255,167,38,1.0) // fromRGBO Decimal

4. Color - Color(int value) : 0xAARRGGBB

color : Color(0xFFFFA726) // int value
Color Int Value
Color Int Value

Output UI Color for all above 4 constructor is same

Color Constructor Output
Color Constructor Output

Coding : Sample Flutter App Code

Useful Resources

Learn more about colors at Material Design Color System

Originally published at https://blog.akshatapp.com on November 18, 2019.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AkshatApp

Helping designers and developers build high quality websites and cross platform mobile apps with our step-by-step developer guides 📚 at akshatapp.com