Flutter - Using ColorFiltered Widget Examples

This tutorial shows you how to use ColorFiltered widget in Flutter.

If you're developing application using Flutter, what if you want to apply color filter to widgets. Flutter has a widget named ColorFiltered that applies color filter to its child widgets.

Creating ColorFiltered Widget

Here's the constructor of ColorFiltered along with its properties.

  ColorFiltered({@required this.colorFilter, Widget child, Key key})

Properties:

• Key key: The widget key, used to control if it's should be replaced.
• Widget child: The widget where the color filter will be applied on.
• ColorFilter colorFilter: Color filter to be applied to child widget.

There are some ways to create a ColorFilter, as explained below.

Using ColorFilter.mode

ColorFilter.mode applies the color given as the first argument using blend mode given as the second argument to the child. You can read about available blend mode on this the Flutter wesbite.

  ColorFilter.mode(Color color, BlendMode blendMode)

Example:

  ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.red, BlendMode.colorBurn),
    child: Image.asset(
      'assets/images/flutter.png',
    ),
  ),

Output:

 

Using ColorFilter.linearToSrgbGamma

It creates a color filter that applies the sRGB gamma curve to the RGB channels.

  ColorFilter.linearToSrgbGamma()

Example:

  ColorFiltered(
    colorFilter: ColorFilter.linearToSrgbGamma(),
    child: Image.asset(
      'assets/images/flutter.png',
    ),
  ),

Output:

 

Using ColorFilter.srgbToLinearGamma

It creates a color filter that applies the inverse of the sRGB gamma curve to the RGB channels.

  ColorFilter.srgbToLinearGamma()

Example:

  ColorFiltered(
    colorFilter: ColorFilter.srgbToLinearGamma(),
    child: Image.asset(
      'assets/images/flutter.png',
    ),
  ),

Output:

 

Using ColorFilter.matrix

It creates a color filter by using a 5x5 matrix.

  ColorFilter.matrix(List<double> matrix)

The first four rows represent R, G, B, A respectively, while the last row is implicitly added in an identity configuration.

  | R' |   | a00 a01 a02 a03 a04 |   | R |
  | G' |   | a10 a11 a22 a33 a44 |   | G |
  | B' | = | a20 a21 a22 a33 a44 | * | B |
  | A' |   | a30 a31 a22 a33 a44 |   | A |
  | 1  |   |  0   0   0   0   1  |   | 1 |

Here's the usage example for applying a greyscale filter. First, create the matrix.

  const ColorFilter greyscale = ColorFilter.matrix(<double>[
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0,      0,      0,      1, 0,
  ]);

Then, pass it as colorFilter argument.

  ColorFiltered(
    colorFilter: greyscale,
    child: Image.asset(
      'assets/images/flutter.png',
    )
  ),

Output:

 

Below is a the matrix for sepia filter.

  const ColorFilter sepia = ColorFilter.matrix(<double>[
    0.393, 0.769, 0.189, 0, 0,
    0.349, 0.686, 0.168, 0, 0,
    0.272, 0.534, 0.131, 0, 0,
    0,     0,     0,     1, 0,
  ]);

Output:

 

Below is an identity matrix that keeps the original color.

  const ColorFilter identity = ColorFilter.matrix(<double>[
    1, 0, 0, 0, 0,
    0, 1, 0, 0, 0,
    0, 0, 1, 0, 0,
    0, 0, 0, 1, 0,
  ]);

Output:

 

And here's the matrix for inverting the color.

  const ColorFilter invert = ColorFilter.matrix(<double>[
    -1,  0,  0, 0, 255,
     0, -1,  0, 0, 255,
     0,  0, -1, 0, 255,
     0,  0,  0, 1,   0,
  ]);

Output: