在图像的一部分上覆盖渐变着色器蒙版

Question

我正在使用以下代码创建着色器遮罩，

  ShaderMask _gradientPng() {
    return ShaderMask(
      child: Image(
        image: AssetImage('images/profile2.jpg'),
        height: 150,
        width: 100,
        fit: BoxFit.fill,
      ),
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          colors: [Color(0xFF396AEA), Color(0xFF3B6EEC)],
          stops: [
            0.0,
            0.5,
          ],
        ).createShader(bounds);
      },
      blendMode: BlendMode.overlay,
    );
  }

我想要达到的效果如下，

不幸的是，以上代码在整个图像上覆盖了渐变。如何使用着色器蒙版获得所需的效果？我该如何解决呢？

Answer 1

您需要更好地调整LinearGradient。

我将结束颜色更改为 Colors.transparent 。

还要提供渐变的开始和终点点

尝试此代码。

LinearGradient(
  begin: Alignment.bottomCenter,
  end: Alignment.topCenter,
  colors: [Color(0xFF396AEA), Colors.transparent],
  stops: [
    0.0,
    0.7,
  ],
  tileMode: TileMode.mirror,
).createShader(bounds);

播放颜色和 stops 参数以调整效果。

您还可以更改 tileMode 。尝试TileMode.mirror或TileMode.clamp

---

要将边界半径添加到图像，请像这样用Image()包裹ClipRRect()小部件

 ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Image(
      image: AssetImage('images/profile2.jpg'),
      fit: BoxFit.fill,
    ),
  )