Flutter Question posted in
The official Flutter documentation can be found here.

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

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

enter image description here

Tags:

2

Answers


  1. 0

    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),
                ],
              ),
            ),
          ),
        ],
      ),
    Login or Signup to reply.
  2. 0

    You can use ShaderMask widget to apply a mask generated by a LinearGradient shader to your image:

    ShaderMask(
  shader: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Colors.black.withOpacity(0.5), Colors.transparent],
  ).createShader(Rect.fromLTRB(0, 0, double.infinity, double.infinity)),
  child: Image.network(imageUrl),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search