[Easy Guide] Flutter Image Color Filter Customization With Examples

In this tutorial, we’ll learn how to properly customize Flutter image color filter. We’ll be going through multiple code examples for practical understanding.

Introduction: Flutter Image Color Filter

It specifies the customization of filter color of image in Flutter. For instance, we’ve an image but we want to replace its default color with a custom color. We’ll now practically understand how to change Flutter image color filter using proper Flutter code examples.

Customizing Flutter Image Color Filter (Step By Step)

In order to understand how to customize Flutter image color filter, we’ve to follow the below steps.

Step 1: Import Image

In our case, we’re using the image from assets. You can use image network as well if you want to fetch an image online. See below code:

Image.asset('assets/cartoon.jpg')

Click here if you want to learn how to import image in asset and use it. The above image shows an image with its own default color.

Step 2: Change Flutter Image Color Filter (Multiple Examples)

For that, we’ve to wrap the image asset widget with Flutter color filtered widget. After that, we’ve to pass mode method of color filter class to its color filter constructor. The mode method takes two constructors. First one is color and second one is used to specify the type of blend mode. See below code:

ColorFiltered(
      colorFilter: ColorFilter.mode(Colors.green.shade400, BlendMode.darken),
      child: Image.asset(
        'assets/cartoon.jpg',
      ),
    )

flutter image color filter

We can see in the above image that Flutter image color filter is now customized.

Let’s see how the image looks if we use color burn. See blow code:

colorFilter: ColorFilter.mode(Colors.green.shade400, BlendMode.colorBurn)

flutter image color filtered

So this is how we can easily customize Flutter image color filter. Do try it with other colors and blend mode as well. If you like this post then feel free to share it with your developer friends.

Don’t hesitate to ask if you still have any queries regarding how to change filter color of Flutter image. We’ll be very happy to solve all your queries.

Below section has the complete source code of custom Flutter image color filter.

Custom Flutter Image Color Filter Source Code

flutter image color filter

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: SingleChildScrollView(
      padding: EdgeInsets.symmetric(vertical: 50),
         // Flutter column widget is to show a list of images
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: EdgeInsets.only(bottom: 10),
            child: ColorFiltered(
              colorFilter:
                  ColorFilter.mode(Colors.blue.shade300, BlendMode.colorBurn),
              child: Image.asset(
                'assets/cartoon.jpg',
                height: 134,
                width: 301,
              ),
            ),
          ),

          Padding(
            padding: EdgeInsets.only(bottom: 11),
            child: ColorFiltered(
              colorFilter:
                  ColorFilter.mode(Colors.green.shade900, BlendMode.colorDodge),
              child: Image.asset(
                'assets/cartoon.jpg',
                height: 135,
                width: 300,
              ),
            ),
          ),

          Padding(
            padding: EdgeInsets.only(bottom: 12),
            child: ColorFiltered(
              colorFilter:
                  ColorFilter.mode(Colors.purple, BlendMode.difference),
              child: Image.asset(
                'assets/cartoon.jpg',
                height: 130,
                width: 303,
              ),
            ),
          ),

          Padding(
            padding: EdgeInsets.only(bottom: 15),
            child: ColorFiltered(
              colorFilter: ColorFilter.mode(
                  Colors.orange.withOpacity(.4), BlendMode.color),
              child: Image.asset(
                'assets/cartoon.jpg',
                height: 131,
                width: 305,
              ),
            ),
          ),

          Padding(
            padding: EdgeInsets.only(bottom: 15),
            child: ColorFiltered(
              colorFilter:
                  ColorFilter.mode(Colors.red.withOpacity(.8), BlendMode.color),
              child: Image.asset(
                'assets/cartoon.jpg',
                height: 132,
                width: 305,
              ),
            ),
          ),

          Padding(
            padding: EdgeInsets.only(bottom: 17),
            child: ColorFiltered(
              colorFilter:
                  ColorFilter.mode(Colors.grey.shade700, BlendMode.hardLight),
              child: Image.asset(
                'assets/cartoon.jpg',
                height: 133.0,
                width: 308,
              ),
            ),
          ),

          Padding(
            padding: EdgeInsets.only(bottom: 18),
            child: ColorFiltered(
              colorFilter:
                  ColorFilter.mode(Colors.yellow.shade900, BlendMode.lighten),
              child: Image.asset(
                'assets/cartoon.jpg',
                height: 133.0,
                width: 308,
              ),
            ),
          ),
        ],
      ),
    )));
  }
}

Conclusion

To conclude this tutorial, hope now you’ve a complete practical understanding of how to easily customize Flutter image color filter. We’ll be happy to have your valuable thoughts on this post.

We’d also love to see you visit our other tutorials on Flutter app development. Thank you for reading this post.