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 thisOpacity(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.
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,) ) ), )