Flutter Image fade out at bottom (Gradient)

Question

Is there a way to make an Image fade out towards the bottom? So the Image has transperency 0 at the bottom.

I need the Image to be transparent, I can\'t use a Stack

Answer 1

you need a ShaderMask, something like this:

ShaderMask(
  shaderCallback: (rect) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.black, Colors.transparent],
    ).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
  },
  blendMode: BlendMode.dstIn,
  child: Image.asset(
    'assets/chrome.png',
    height: 400,
    fit: BoxFit.contain,
  ),
),

here shaderCallback is used for returning a linear gradient that is used as a mask and with BlendMode.dstIn blend mode fades out your image from the top to the bottom