Blend Images with flutter

Opacity widget (For beginners)

In this post, I’ll show you an easy way to blend two images together for flutter apps, and that’s by using the Opacity widget with the image widget.

The opacity widget makes its child partially transparent for a given value of opacity. This value must be between 0.0 and 1.0. The opacity class requires painting the child into an intermediate buffer. For the value 0.0, the child is simply not painted at all. For the value 1.0, the child is painted immediately without an intermediate buffer.

In this example, we have chosen two images namely a lion image and a sunrise image and we want to fade the lion into the sunrise landscape.

Firstly, we use the widget image to insert these two images from the internet by using Image.network.

1. To insert the sunset image :

Image.network(
  'http://maxqubit.files.wordpress.com/2011/06/agana-bay-at-sunset-tamuning-guam-wallpaper31.jpg',
  fit: BoxFit.cover,
  width: double.maxFinite,
  height: 400,
),

2. To insert the lion image :

Image.network(…