Flutter Color Developer Guide

Flutter Color Developer Guide
Flutter Color Developer Guide
  • Flutter Material Colors Class
  • Flutter Dart:ui Color Class

How to use Flutter Material Colors Class ?

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

  • Color shade ranges from 100 to 900 in increment of one hundred
  • Color with shade 50 is also added to above range in some colors
  • Accent Colors have only shade values 100,200,400 and 700
  • Lower Shade Value = Pale Color
  • Higher Shade Value = Darker Color
Darker Orange Shade = Colors.orange[900]
Darker Orange Shade = Colors.orange[900]
  • Colors.orange[900]
  • Colors.orange.shade900
Colors.orange[900]
Colors.orange[900]
Colors.orange.shade900
Colors.orange.shade900
Color Shade Orange 900 UI
Color Shade Orange 900 UI

3. Colors class - Black and White Colors

  • We have separate set of constants for color black and color white
  • These colors are identified by their transparency and not shade values.
  • Colors.black54 : pure black with 54 % opacity
  • Colors.black12 : pure black with 12 % opacity
  • Lower Number : Transparent Color
  • Higher Number : Opaque Color
White & Black Colors
White & Black Colors

How to use Flutter Dart:UI Color Class ?

Color channels

  • Red Channel
  • Green Channel
  • Blue Channel
  • Alpha Channel (Transparency)

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
- 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
  • Bits 0 to 7 Blue value (Blue Channel)
  • Bits 8 to 15 Green Value (Green Channel)
  • Bits 16 to 23 Red Value (Red Channel)
  • Bits 24 to 31 Alpha Value (Alpha Channel)

Difference between Alpha and Opacity

Orange Int Value
Orange Int Value
  • Red Channel FF (hex) equals 255 (decimal)
  • Green Channel A7 (hex) equals 167(decimal)
  • Blue Channel 26 (hex) equals 38(decimal)

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

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
  • O stands for opacity — refer above explained opacity property summary
  • double value — 0.0 (transparent) to 1.0 (opaque)

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

  • Get any color int value for example #FFA726
  • Add 0xFF to “hash syntax” FFA726 => 0xFFFFA726
  • 0xFF added to hash syntax is the alpha channel FF(hex) => 255 (decimal) opaque color
color : Color(0xFFFFA726) // int value
Color Int Value
Color Int Value
Color Constructor Output
Color Constructor Output

Coding : Sample Flutter App Code

Useful Resources

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Intro to Nginx Web Server (Part 1)

OData for ASP.NET Core 6.0 on Mac via command line

3 Mistakes Developers Make When They’re in a Hurry

The Importance of Naming

Image of a snake with the text overlay Scaly Fangy Nope

Escalate_my_privilege — Walkthrough✨

Simple Musical Pitch Values with Swift Enums

Yachtingverse & Klein / Invitation to Metaverse Test Event!

FizzBuzz in one line of Python

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

AkshatApp

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

More from Medium

Flutter Puzzle Hack Updates

Xylophone Flutter app

Fixing BoxDecoration background animation in Flutter

Flutter MethodChannel