Flutter ShaderMask渐变在Safari（移动/桌面端）无法正常渲染求助

你的问题源于Safari对ShaderMask结合BlendMode.srcATop的支持存在兼容性缺陷，可通过以下两种方案修复：

方案1：直接用TextStyle的foreground属性设置渐变 #

无需依赖ShaderMask，直接给Text的样式配置渐变Shader，兼容性最优：

import 'package:flutter/material.dart';

class GradientText extends StatelessWidget {
  GradientText({
    required this.text,
    this.size = 20,
    super.key,
  });

  final String text;
  final double size;
  final colors = [
    const Color(0xFFC9BBE7),
    const Color(0xFFC2DCFF),
    const Color(0xFF75B1FF),
  ];

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(
        fontSize: size,
        fontFamily: 'Satoshi',
        fontWeight: FontWeight.bold,
        // 直接通过foreground绑定渐变Shader
        foreground: Paint()
          ..shader = LinearGradient(colors: colors).createShader(
            Rect.fromLTWH(0, 0, 0, size),
          ),
      ),
    );
  }
}

方案2：调整ShaderMask的混合模式 #

若坚持使用ShaderMask，可将BlendMode.srcATop替换为BlendMode.modulate，同时调整文本颜色保证效果：

import 'package:flutter/material.dart';

class GradientText extends StatelessWidget {
  GradientText({
    required this.text,
    this.size = 20,
    super.key,
  });

  final String text;
  final double size;
  final colors = [
    const Color(0xFFC9BBE7),
    const Color(0xFFC2DCFF),
    const Color(0xFF75B1FF),
  ];

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (bounds) => LinearGradient(colors: colors).createShader(bounds),
      // 替换为Safari兼容的混合模式
      blendMode: BlendMode.modulate,
      child: Text(
        text,
        style: TextStyle(
          fontSize: size,
          fontFamily: 'Satoshi',
          fontWeight: FontWeight.bold,
          // 白色文本配合modulate模式，保证渐变完整呈现
          color: Colors.white,
        ),
      ),
    );
  }
}

说明 #

• 方案1无需额外调整文本颜色，是最稳妥的选择；
• 方案2中modulate模式会将渐变与文本颜色相乘，因此需将文本设为白色才能完整展示渐变效果。

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