颤动的图像在底部淡出（渐变） [英] Flutter Image fade out at bottom (Gradient)

问题描述

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

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.

这是我的图片

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

推荐答案

您需要一个 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 混合模式可使图像从顶部到底部

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

这篇关于颤动的图像在底部淡出（渐变）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！