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

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

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

我试图达到的效果如下，



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

最佳答案

您需要更好地调整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);

使用颜色播放，并且停止参数来调整效果。

您还可以更改 tileMode 。尝试TileMode.mirror或TileMode.clamp
要将边框半径添加到图像，请使用Image()像这样包装ClipRRect()小部件

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