Creating Colors in Flutter with examples

Flutter makes it very easy to create a custom theme for your application. This article will quickly outline the various ways of using colors in Flutter.

The Colors Class

The Colors class provides quick access to colors that match the Material Design color palette.

Primary Colors

• Primary colors have shades from 100 - 900 in increments of one hundred with a starting shade of 50
• The color without a shade (ex: Colors.pink) is equivalent to the 500 shade

Accent Colors

• Accent colors have shades of 100, 200, 400, and 700
• The color without a shade (ex: Colors.pinkAccent)  is equivalent to the 200 shade

Blacks and Whites

The colors class also provides a series of black and white colors. The numbers included in the name describe their opacity level.

Transparent

The Colors.transparent color represents a fully transparent color.

The Color Class

The Color class (note the lack of a trailing s!) is what we'll use to create our own custom colors.

HEX Colors

We can create a color using HEX values with the Color constructor

static const c = Color(0xFF42A5F5);

• Prefix the value with 0x
• The first 2 digits are the opacity, a hex code from 0 to FF
• The last 6 digits is the HEX color code

ARGB Colors

We can create a color using ARGB values with the Color.fromARGB constructor

static const c = Color.fromARGB(255, 66, 165, 245);

• The first value is the alpha value, an int from 0 to 255
• The last 3 values are the RGB colors, an int from 0 to 255
• Using HEX values is supported

RGBO Colors

We can create a color using RGBO values with the Color.fromRGBO constructor

static const c = Color.fromRGBO(66, 165, 245, 1.0);

• The first 3 values are the RGB colors, an int from 0 to 255
• The last value is the opacity, a double from 0.0 to 1.0
• Using HEX values is supported for the first 3 values

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join the MagsAI Discord Server!

MagsAI is a community of thoughtful learners interested in sharing their knowledge and growing together