Flutter中如何实现图片叠加并在底部与背景gradient图交叉淡入淡出？

需求说明 #

• 背景图：gradient
  
• 需要将artist图片叠加在背景图上方，已实现混合效果，但缺少底部与背景图的交叉淡入淡出效果
• 效果对比：
  

当前代码 #

Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: Assets.package.gradient.provider(),
        fit: BoxFit.cover,
      ),
    ),
    constraints: BoxConstraints(
      minHeight: MediaQuery.of(context).size.height -
          MainAppBar.mainAppBarSize,
    ),
    width: width,
    child: Stack(
      children: [
        Positioned(
          left: -increasePixels,
          right: -increasePixels,
          top: -increasePixels,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                  Colors.black.withOpacity(0.3),
                  BlendMode.dstIn,
                ),
                image: Assets.package.artist.provider(),
              ),
            ),
            width: width + increasePixels * 2,
            height: (width + increasePixels * 2) *
                widget.imageAspectRatio,
          ),
        ),
    ],)
)

解决方案 #

通过ShaderMask组件给artist图片添加底部渐变透明效果，让其与下方的gradient背景自然融合：

修改后的完整代码：

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: Assets.package.gradient.provider(),
      fit: BoxFit.cover,
    ),
  ),
  constraints: BoxConstraints(
    minHeight: MediaQuery.of(context).size.height - MainAppBar.mainAppBarSize,
  ),
  width: width,
  child: Stack(
    children: [
      Positioned(
        left: -increasePixels,
        right: -increasePixels,
        top: -increasePixels,
        child: ShaderMask(
          // 定义渐变遮罩：从上到下从完全可见过渡到透明
          shaderCallback: (Rect rect) {
            return LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.white, Colors.transparent],
              // 调整stops参数控制淡入范围：0.7表示70%高度处开始渐变，1.0为底部完全透明
              stops: const [0.7, 1.0],
            ).createShader(rect);
          },
          // 混合模式：让遮罩区域的图片透明化，透出下方背景
          blendMode: BlendMode.dstIn,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                  Colors.black.withOpacity(0.3),
                  BlendMode.dstIn,
                ),
                image: Assets.package.artist.provider(),
              ),
            ),
            width: width + increasePixels * 2,
            height: (width + increasePixels * 2) * widget.imageAspectRatio,
          ),
        ),
      ),
    ],
  ),
)

关键说明 #

• ShaderMask通过渐变遮罩实现图片局部透明，BlendMode.dstIn保证遮罩的透明区域会透出下方的背景图
• 调整stops参数可以控制渐变的起始位置，比如把0.7改成0.8会让淡入区域更靠近底部
• 如果需要更贴合背景的渐变效果，可以把Colors.white替换为背景gradient的主色调，当前设置已能实现自然的交叉淡入效果

内容的提问来源于stack exchange，提问作者progNewbie