一尘不染

颤动的图像在底部淡出(渐变)

flutter

有没有一种方法可以使图像逐渐淡出底部?因此,图像底部的透明度为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
                  ]
                )
              ),
            ),
          ]
        ),

阅读 267

收藏
2020-08-13

共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混合模式下从顶部到底部淡出图像

2020-08-13