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

Answer 1

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.

Answer 2

You will have to use Stack and positioned widget side by side. Add your image as child of the Container. I hope this helps

Stack(
          children: <Widget>[
            Positioned(
              right: 20,
              child: Container(
                height: 150,
                width: 100,
                color: Colors.black,
              ),
            ),
            ListView(
              padding: EdgeInsets.only(top: 100),
              children: <Widget>[
                Ink(
                  color: Colors.green,
                  child: ListTile(
                    title: Text("Tile 1"),
                    subtitle: Text("subtitle"),
                  ),
                ),
                Ink(
                  color: Colors.blue,
                  child: ListTile(
                    title: Text("Tile 2"),
                    subtitle: Text("subtitle"),
                  ),
                ),
                Ink(
                  color: Colors.green,
                  child: ListTile(
                    title: Text("Tile 3"),
                    subtitle: Text("subtitle"),
                  ),
                ),
              ],
            ),
          ],
        ),