颤动的图像在底部淡出（渐变）

Question

有没有一种方法可以使图像逐渐淡出底部？因此，图像底部的透明度为0。

我需要图像是透明的，不能使用堆栈在底部用颜色覆盖图像，因为我不知道图像的底下是什么。

这是我的形象

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

我不能这样做：

        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

您需要一个ShaderMask，例如：

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,
  ),
),

这里shaderCallback用于返回用作蒙版​​的线性渐变，并在BlendMode.dstIn混合模式下从顶部到底部淡出图像

Answer 2

与问题没有直接关系，但当您只想淡出容器中的颜色时，您可能会遇到这种情况。然后你可以用Container foregroundDecoration这个：

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,
  ),
),

结果：