Flutter中渐变颜色文字阴影无法正常显示如何解决

问题现象 #

使用ShaderMask实现Text组件渐变颜色效果时，TextStyle中配置的文字阴影无法正常渲染，异常效果如下：

原有渐变文字实现代码：

class GradientText extends StatelessWidget {
  const GradientText(
    this.text, {
    required this.gradient,
    this.style,
  });

  final String text;
  final TextStyle? style;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      blendMode: BlendMode.srcIn,
      shaderCallback: (bounds) => gradient.createShader(
        Rect.fromLTWH(0, 0, bounds.width, bounds.height),
      ),
      child: Text(
        text,
        style: style,
        textAlign: TextAlign.center,
      ),
    );
  }
}

阴影配置代码（无法正常生效）：

Scaffold(
  backgroundColor: MyTheme.mytheme.shade50,
  body: SafeArea(
    child: Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              child: GradientText("Wallpaper",
                  style: GoogleFonts.pacifico(
                      textStyle: const TextStyle(fontSize: 30, shadows: [
                        Shadow(
                          blurRadius: 10,
                          offset: Offset(5, 5),
                        )
                      ])),
                  gradient: const LinearGradient(colors: [
                    Colors.red,
                    Colors.pink,
                    Colors.purple,
                    Colors.deepPurple,
                    Colors.indigo,
                    Colors.blue,
                    Colors.lightBlue,
                    Colors.cyan,
                    Colors.teal,
                    Colors.green,
                    Colors.lightGreen,
                    Colors.lime,
                    Colors.yellow,
                    Colors.amber,
                    Colors.orange,
                    Colors.deepOrange,
                  ])),
            )
          ],
        )
      ])
  )
)

问题根因 #

ShaderMask设置的BlendMode.srcIn混合模式，会将子组件所有绘制内容（包括Text原生渲染的阴影）全部替换为渐变着色。阴影本身是半透明模糊像素，经过该模式混合后，不仅会和文字本体一样被染上渐变，半透明区域还会被混合规则裁剪，最终无法呈现预期的阴影效果。

修复方案 #

调整渲染逻辑，将阴影和渐变文字分层绘制：单独渲染阴影层，再在上层叠加渐变文字本体，避免ShaderMask作用到阴影部分。

修改后的GradientText组件代码：

class GradientText extends StatelessWidget {
  const GradientText(
    this.text, {
    required this.gradient,
    this.style,
    super.key,
  });

  final String text;
  final TextStyle? style;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    // 提取TextStyle中配置的阴影属性
    final textShadows = style?.shadows;
    // 阴影层样式：移除重复阴影配置
    final shadowStyle = style?.copyWith(
      shadows: null,
    );
    // 渐变文字层样式：移除阴影配置，设置白色为基础色保证渐变着色准确
    final gradientTextStyle = style?.copyWith(
      color: Colors.white,
      shadows: null,
    );

    return Stack(
      alignment: Alignment.center,
      children: [
        // 渲染阴影层
        if (textShadows != null && textShadows.isNotEmpty)
          for (final shadow in textShadows)
            Transform.translate(
              offset: shadow.offset,
              child: ImageFiltered(
                imageFilter: ImageFilter.blur(
                  sigmaX: shadow.blurRadius,
                  sigmaY: shadow.blurRadius,
                ),
                child: Text(
                  text,
                  style: shadowStyle?.copyWith(color: shadow.color),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
        // 渲染上层渐变文字
        ShaderMask(
          blendMode: BlendMode.srcIn,
          shaderCallback: (bounds) => gradient.createShader(
            Rect.fromLTWH(0, 0, bounds.width, bounds.height),
          ),
          child: Text(
            text,
            style: gradientTextStyle,
            textAlign: TextAlign.center,
          ),
        ),
      ],
    );
  }
}

适配说明 #

• 业务侧调用代码无需修改，原有TextStyle中配置的阴影偏移、模糊半径、颜色、透明度参数都可以自动生效
• 支持同时配置多个阴影，组件会自动遍历渲染所有阴影层
• 如需调整阴影深浅，可以直接修改Shadow配置中的颜色透明度参数

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