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 and overlay the Image at the bottom with a Color, because I don't know whats underneath the Image.

This is my Image

            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(1), BlendMode.dstATop),
                  image: NetworkImage(
                    routine.thumbnail
                  )
                )
              ),
            )

I can't do this:

        background: Stack(
          alignment: AlignmentDirectional.bottomCenter,                        
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                    routine.thumbnail,
                  )
                )
              ),
            ),
            Container(
              width: 1000,
              height: 100,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: [
                    Colors.transparent,
                    someColor // I don't know what Color this will be, so I can't use this
                  ]
                )
              ),
            ),
          ]
        ),

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