Flutter: getting css :after kind of effect for image to apply background

user_630238 0
Viewed 287

I have CSS rule to add background to the images have a white background as follows

.product-img:after {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(40,44,63,.05);
   content: '';
   background-blend-mode: overlay;
 }

Results [![enter image description here][3]][3]

want to get the same effect in a flutter, I have tried a couple of widgets like Stack, Position,
but couldn't achieve the same effect.

My Image loading widget:

FadeInImage(
   image: NetworkImage(
   "my-url"
   ),
   placeholder: AssetImage('assets/images/load_fut.png'),
),
flutter-web flutter
2 Answers

Seems your images have solid white background. So to display on top of white background need to play bit with blendmode to achieve desired effect. Here is output close to what you're trying to achieve.

Update : Using cached_network_image

Add Depednecy cached_network_image: ^2.2.0+1

  @override
  _ColorPageState createState() => _ColorPageState();
}

class _ColorPageState extends State<ColorPage> {
  @override
  Widget build(BuildContext context) {
    return 
    CachedNetworkImage(
      height: 200,
      width: 400,
      colorBlendMode: BlendMode.darken,
      color: Color.fromARGB(20, 40, 44, 63),
      imageUrl:
          "https://tacskey.com/image/cache/catalog/categories/Cold%20Cuts/chicken-nuggets-600x350.jpg",
      placeholder: (context, url) =>  Image.asset(
          'assets/loader_.png',
          height: 50,
          width: 50,
      ),
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  }
}

Output gif :

enter image description here

user_121348840

If by "images [that] have a white background, " you mean transparent images, then to give images of that type a background color, you can wrap the Image widget with a Container widget and give it your desired color and that will be the background color.

Like below:

Container(
    color: Color.fromRGBO(40, 44, 100, .05),
    child: Image.network(imageUrl)
)
user_110391640
Related