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: 
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
Not directly connected to the question but you might come across this when you just want to fade out a color in a container.
Then you can use `Container` `foregroundDecoration` for this:

```dart
Container(
  height: 100,
  width: 100,
  foregroundDecoration: const BoxDecoration(
    gradient: LinearGradient(
      colors: [
          Colors.black,
          Colors.transparent,
              ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: [0, 0.5],
    ),
  ),
  child: Container(
    color: Colors.red,
  ),
),

```

Result:

[![gradient example](https://i.stack.imgur.com/vH5Ai.png)](https://i.stack.imgur.com/vH5Ai.png)