How to Add Opacity - Color Filter to an Image in Flutter

How to Add Opacity / Color Filter to an Image in Flutter

We can add Opacity or Color filters to images in Flutter in many different ways.

Flutter comes with a built-in widget Opacity. Though we can use this widget to add opacity to an image, it is not recommended. We need to use this Opacity widget only when there is no other way to add opacity to an image. If we must have to do it, we can do like this

Opacity(opacity: 0.8, child: Image.asset(‘assets/sample1.jpg’, ),),

Instead of using the Opacity widget, we can use the color property of Image.asset / Image.network widget to add opacity or a filter to an image.

example:

child: Column(
            children: [
              Text('Working with Images'),
              Image.asset('assets/sample1.jpg', color: Colors.white.withOpacity(0.8), colorBlendMode: BlendMode.modulate, )
            ],
          ),

 

Output for the previous code – Without color and with color property

Without color option

With color option

Another way to add opacity or color filters to an image is to wrap it inside a Container widget and use the decoration property of the Container to add the colors and filters.

example code which is equivalent to the previous:

Container(
                height: 600,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/sample1.jpg'),
                    colorFilter: ColorFilter.mode(Colors.white.withOpacity(0.8), BlendMode.modulate,)
                  )
                ),
              )