Flutter ColorFiltered Examples

Last updated on June 24, 2021 A Goodman Loading... Post a comment

A few examples of using the ColorFiltered widget in Flutter.

A Prefatory Note

The ColorFiltered widget is used to apply a color filter to its child widgets. It takes 3 parameters: key (optional), child (a child widget – optional), colorFilter (required). The colorFilter parameter can be constructed by using one of the following:

1. ColorFilter.mode: Creates a color filter that applies the blend mode given as the second argument. The source color is the one given as the first argument, and the destination color is the one from the layer being composited

2. ColorFilter.matrix: Construct a color filter that transforms a color by a 5×5 matrix, where the 5th 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 |

3. ColorFilter.srgbToLinearGamma: Creates a color filter that applies the inverse of the sRGB gamma curve to the RGB channels.

4. ColorFilter.linearToSrgbGamma: Creates a color filter that applies the sRGB gamma curve to the RGB channels.

You can find more information in the official docs.

The images in this article are from Pixabay, used under the Pixabay License.

Example 1: ColorFilter.mode

This example displays a black-and-white photo from a color photo.

Screenshot:

Original image on top and filtered image below

The code:

class HomeScreen extends StatelessWidget {
  final _imageUrl =
      'https://www.kindacode.com/wp-content/uploads/2021/06/pi-1.jpeg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Column(
        children: [
          // The original image
          Image.network(_imageUrl),

          // The black-and-white image
          ColorFiltered(
            colorFilter: ColorFilter.mode(Colors.grey, BlendMode.saturation),
            child: Image.network(_imageUrl),
          ),
        ],
      ),
    );
  }
}

Example 2: ColorFilter.matrix

In this example, we use ColorFilter.matrix to invert the color of an image. Light areas will turn dark and vice versa.

Screenshot:

Original image on top and filtered image below

The code:

class HomeScreen extends StatelessWidget {
  final _imageUrl =
      'https://www.kindacode.com/wp-content/uploads/2021/06/23.jpeg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Column(
        children: [
          // The original image
          Image.network(_imageUrl),

          SizedBox(
            height: 10,
          ),

          // The filtered-color image
          ColorFiltered(
            colorFilter: ColorFilter.matrix([
              -1,  0,  0, 0, 255,
              0, -1,  0, 0, 255,
              0,  0, -1, 0, 255,
              0,  0,  0, 1,   0,
            ]),
            child: Image.network(_imageUrl),
          ),
        ],
      ),
    );
  }
}

Example 3: ColorFilter.srgbToLinearGamma

Screenshot:

Original image above and filtered image below

The code:

class HomeScreen extends StatelessWidget {
  final _imageUrl =
      'https://www.kindacode.com/wp-content/uploads/2021/06/lion.jpeg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Column(
        children: [
          // The original image
          Image.network(_imageUrl),

          // The filtered image
          ColorFiltered(
            colorFilter: ColorFilter.srgbToLinearGamma(),
            child: Image.network(_imageUrl),
          ),
        ],
      ),
    );
  }
}

Example 4: ColorFilter.linearToSrgbGamma

This example uses ColorFilter.linearToSrgbGamma.

Screenshot:

Original image above and filtered image below

The code:

class HomeScreen extends StatelessWidget {
  final _imageUrl =
      'https://www.kindacode.com/wp-content/uploads/2021/06/flowers.jpeg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Column(
        children: [
          // The original image
          Image.network(_imageUrl),

          // The filtered-color image
          ColorFiltered(
            colorFilter: ColorFilter.linearToSrgbGamma(),
            child: Image.network(_imageUrl),
          ),
        ],
      ),
    );
  }
}

Conclusion

We’ve gone over a couple of examples of implementing the ColorFiltered widget. If you’d like to learn more about Flutter and mobile development, take a look at the following articles:

You can also check out our Flutter category page, or Dart category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles