How can I add a linear gradient overlay to my image?

Question

I'm using flutter and i can't put a linear gradient overlay to my image.

I tried some solutions but no one works, can someone explain to me how can i get the result that i show in the image? The image is from internet.

Thanks

This is what i want

Answer 1

You can add a linear gradient overlay to an image using the Stack widget to overlay widgets on top of each other.

Here is example for that:

Stack(
    children: <Widget>[
          Image.network(
            'https://example.com/your-image.jpg',
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.cover,
          ),
          
          Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Colors.transparent, 
                  Colors.black.withOpacity(0.6),
                ],
              ),
            ),
          ),
        ],
      ),