Skip to main content

​
Color

The Color that can apply to different Flutter widgets for example text color, background color, border color etc. official documentation.

​
Types of color

There are three different types of colors. Theme color, Hex color and Name color.

​
Theme colors

The Theme colors are theme based colors which we define in theme. These are the theme colors [primary, onPrimary,primaryContainer, onPrimaryContainer, secondary, onSecondary, secondaryContainer, onSecondaryContainer, tertiary, onTertiary, tertiaryContainer, onTertiaryContainer, error, onError, errorContainer, onErrorContainer, background, onBackground, surface, onSurface, surfaceVariant, onSurfaceVariant, outline, outlineVariant, shadow, scrim, inverseSurface, onInverseSurface, inversePrimary, surfaceTint, scaffoldBackgroundColor].

​
Hex colors

The Hex colors will allows to define custom hex value. It could be 6 digit Hex code(#FF0000) or it could be 8 digit Hex code(#88FF0000) where first 2 digits are for opacity.

​
Name colors

The Name colors will allows to provide color by using color names and opacity for black and white colors. These are the name colors [amber, amberAccent, black, blue, blueAccent, blueGrey, brown, cyan, cyanAccent, deepOrange, deepOrangeAccent, deepPurple, deepPurpleAccent, green, greenAccent, grey, indigo, indigoAccent, lightBlue, lightBlueAccent, lightGreen, lightGreenAccent, lime, limeAccent, orange, orangeAccent, pink, pinkAccent, purple, purpleAccent, red, redAccent, teal, tealAccent, transparent, white, yellow, yellowAccent]. These are the opacities for white color [10, 12, 24, 30, 38, 54, 60, 70]. These are the opacities for black color [12, 26, 38, 45, 54, 87].

​
Example

​
Example 1: Theme color

{
  "type": "text",
  "data": "Hello World!",
  "style": {
    "color": "primary"
  }
}

​
Example 2: Hex color

{
  "type": "text",
  "data": "Hello World!",
  "style": {
    "color": "#000000"
  }
}

​
Example 3: Name color

{
  "type": "text",
  "data": "Hello World!",
  "style": {
    "color": "black45"
  }
}
⌘I