Flutter中如何实现图片上半部分不透明、下半部分渐变透明效果？

你可以通过Flutter内置的ShaderMask组件给图片添加渐变透明遮罩实现需求，无需调整原有布局结构，仅需给两个Image.asset外层分别包裹ShaderMask即可，修改后的完整代码如下：

SizedBox(
  width: double.infinity,
  height: 400,
  child: Stack(
    children: [
      Positioned(
        left: 0,
        height: 450,
        child: ShaderMask(
          shaderCallback: (bounds) => const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.white, Colors.transparent],
          ).createShader(bounds),
          blendMode: BlendMode.dstIn,
          child: Image.asset(
            'assets/images/face_woman.png',
          ),
        ),
      ),
      Positioned(
        right: -40,
        top: 0,
        height: 450,
        child: ShaderMask(
          shaderCallback: (bounds) => const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.white, Colors.transparent],
          ).createShader(bounds),
          blendMode: BlendMode.dstIn,
          child: Image.asset(
            'assets/images/face_man.png',
          ),
        ),
      )
    ],
  ),
)

关键配置说明 #

• blendMode: BlendMode.dstIn：指定遮罩混合模式，使用渐变的透明度控制原图片的显示透明度
• LinearGradient配置：渐变方向从顶部到底部，颜色从完全不透明的白色过渡到完全透明，实现顶部正常显示、底部渐隐的效果
• 若需要调整透明过渡的起始位置，可以给LinearGradient添加stops参数，比如stops: [0.7, 1.0]代表图片前70%区域完全不透明，剩余30%区域逐步过渡到全透明

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