Flutter中ShaderMask无法对Text组件单个字符生效渐变如何解决？

核心问题 #

你当前的代码问题出在BlendMode混合模式选择错误，BlendMode.color会将渐变作用在ShaderMask覆盖的整个矩形区域，而非仅子组件的非透明区域（也就是文字本身）。

调整步骤 #

• 将blendMode属性值替换为BlendMode.srcIn：该混合模式会仅保留渐变和文字重叠的非透明部分，实现渐变仅作用在文字上的效果
• 给Text组件的style明确设置color: Colors.white：确保文字本身有不透明的底色，避免系统默认颜色导致混合失效
• 可选优化：将渐变方向改为从左到右，同时添加stops参数精准对齐三个字符的颜色区间，实现每个字符对应一个渐变颜色的效果

修正后完整代码 #

child: ShaderMask(
  blendMode: BlendMode.srcIn,
  shaderCallback: (shader) {
    return LinearGradient(
      colors: const [Colors.red, Colors.green, Colors.blue],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      stops: const [0, 0.5, 1],
    ).createShader(shader);
  },
  child: Text(
    stepTitle,
    style: TextStyle(
      fontWeight: FontWeight.bold, 
      fontSize: stepFont,
      color: Colors.white,
    ),
  ),
),

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