Mobile Safari 无法正确渲染 Flutter ShaderMask 渐变颜色

Question

我正在尝试在 Flutter 中实现gradientText。一切都很酷，除了 iOS Safari，它不反映渐变：

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),
      blendMode: BlendMode.srcATop,
      child: Text(
        text,
        style: TextStyle(
          fontSize: size,
          fontFamily: 'Satoshi',
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

结果如下：

macOS Safari 也是如此（Chrome 和其他浏览器也可以）

如您所见，徽标下的文本对于 Safari 没有渐变。

Answer 1

最近在做一个包含渐变文本的项目，看看下面的小部件：

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),
    );
  }
}

我认为你错过了那行代码：

Rect.fromLTWH(0, 0, bounds.width, bounds.height),