Make an image with opacity layer in Flutter.

With flutter you can add images to multiple decorations in containers, cards, avatars, hero images, image horizontal slider, ect, so you can one of the most commond UI designs are the colorized layers in images, in flutter is very easy to implement this feature with help of boxDecoration property.

decoration:
BoxDecoration(
  color: const Color(0xff7c94b6),
  image: new DecorationImage(
    fit: BoxFit.cover,
    colorFilter: 
      ColorFilter.mode(Colors.black.withOpacity(0.2), 
      BlendMode.dstATop),
    image: new NetworkImage(
      'http://www.server.com/image.jpg',
    ),
  ),
),

color property is the color of the opacity layer so you could choose in different color options in Flutter you can use:

• RGBA : “Color.fromARGB(255, 66, 165, 245)”; Or “Color.fromRGBO(66, 165, 245, 1.0)”;
• Hex color as: “Color(0xFF42A5F5)”;
• Even you can use material design color pallete with helper Colors like: “Colors.blue” for example.

A boxDecoration property is valid in containers so you could use this to add a layer to a specific container and this container needs a child: so the child inside the container would be colorized too.

Another tip: to add darker layer you can add on “colorFilter” property:

colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.5),                                                    BlendMode.srcOver)

Thats all for now folks, happy coding!