Flutter: How to make some area of image transparent in Flutter?

Question

I want the lower path of Doctor image to get transparent so that I can see the tiles going underneath it. How can I do that? I tried opacity but it is making the whole image fade.

Remember just the lower part not whole image

Solution

For different opacity in the same image, you can use a ShaderMask like this:

ShaderMask(
        shaderCallback: (rect) {
          return LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: <Color>[
                    Colors.black.withOpacity(1.0),
                    Colors.black.withOpacity(1.0), 
                    Colors.black.withOpacity(0.3), 
                    Colors.black.withOpacity(0.3),// <-- change this opacity
          // Colors.transparent // <-- you might need this if you want full transparency at the edge
        ],
        stops: [0.0, 0.5,0.55, 1.0], //<-- the gradient is interpolated, and these are where the colors above go into effect (that's why there are two colors repeated)
          ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
        },
        blendMode: BlendMode.dstIn,
        child: FlutterLogo(size: 80, colors: Colors.red),
      ),

You'll have to play around with the LinearGradient stops in order to get the effect that you're looking for. Just for completeness sake, let me explain the colors and the stops that I chose. Since the gradient is interpolated, you need a really strong step from one color to the other. So, looking at the stops and colors, it reads like this: start the first color (with opacity = 1.0) at 0% of the way down and go until you hit 50% of the way down, then interpolate from 50% to 55% from opacity 1.0 to opacity 0.3 (that's why those numbers need to be close together) Finally, end with opacity 0.3 at 100% of the image. I explained that piece, because you will have to adjust the 0.5 and 0.55 piece to make it look how you want.

Comments

[Hamza]

Means I have to make the edge transparent outside flutter and then add the image?

[Hamza]

Actually it is working I'm already on this concept but the thing is image is not transparent either the tiles overlay it or the image overlay the tiles I just want the edge to be a little soft so that I can see the tiles underneath it

[Suman Maharjan]

Can you be a bit more clearer? Do you want to achieve something that you've shown in the image above? Or can you share your design that can clear out what you are trying to achieve? I didn't understand "edge to be a little soft"?

[William Terrill]

I just read the other answer... I'm not sure what you want. I assumed that by "transparent' that you meant completely transparent. but it sounds like what you want is for the bottom half of that image to be 'blurry' like in the image you posted. Is that correct?

[William Terrill]

Also, yes, you can also set the opacity with an external program and import it. The only problem there is you lose some responsiveness of your widgets

[Hamza]

Okay, let me put it this way... The image that I've shown right now is being overlay by the list tiles, I just want to make the image transparent just from bottom half so that instead of overlay, i can see list tile moving underneath it I hope you get it?

[Hamza]

Okay, the same image that I've shown in my image. But I want the lower part of image to be blurry or transparent so that I can see the list tile moving under it not like this they are being over the image right now. In stack I can do the vice versa but then image is above the tiles, i want to lower part to get blurry or transparent so that I can see tiles moving under it

[William Terrill]

Yes. I get it. and I updated my code based on that. The posted code on this answer allows an image to have a different opacity on the top versus the bottom. Give it a try.

[Hamza]

Yes!!!!! it worked! Thanks a lot sir Thank you so very much <3

[William Terrill]

I’m glad to hear that! Aig you’re happy with the answer, would you be so kind as to select this answer and upvote it? Ii would appreciate the reputation points!

[William Terrill]

Thank you very much!