Android利用ShaderMask实现花里胡哨的文字特效

const ShaderMask({
  Key? key,
  required this.shaderCallback,
  this.blendMode = BlendMode.modulate,
  Widget? child,
})

ShaderMask(
  shaderCallback: (rect) {
    return LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.blue,
        Colors.green[300]!,
        Colors.orange[400]!,
        Colors.red,
      ],
    ).createShader(rect);
  },
  blendMode: BlendMode.srcIn,
  child: const Text(
    '岛上码农',
    style: TextStyle(
      fontSize: 36.0,
      fontWeight: FontWeight.bold,
    ),
  ),
),

@immutable
class SweepTransform extends GradientTransform {
  const SweepTransform(this.dx, this.dy);

  final double dx;
  final double dy;

  @override
  Matrix4 transform(Rect bounds, {TextDirection? textDirection}) {
    return Matrix4.identity()..translate(dx, dy);
  }

  @override
  bool operator ==(Object other) {
    if (identical(this, other)) {
      return true;
    }
    if (other.runtimeType != runtimeType) {
      return false;
    }
    return other is SweepTransform && other.dx == dx && other.dy == dy;
  }

  @override
  int get hashCode => dx.hashCode & dy.hashCode;
}

ShaderMask(
  shaderCallback: (rect) {
    return LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.blue,
        Colors.green[300]!,
        Colors.orange[400]!,
        Colors.red,
      ],
      transform: SweepTransform(
          (_animation.value - 0.5) * rect.width, 0.0),
    ).createShader(rect);
  },
  blendMode: BlendMode.srcIn,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset(
        'images/loGo.png',
        scale: 2,
      ),
      const Text(
        '岛上码农',
        style: TextStyle(
          fontSize: 36.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
),

ShaderMask(
  shaderCallback: (rect) {

    return ImageShader(
        fillImage,
        TileMode.decal,
        TileMode.decal,
        (Matrix4.identity()
              ..translate(-20.0 * _animation.value,
                  -150.0 * _animation.value))
            .storage);
  },
  blendMode: BlendMode.srcIn,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset(
        'images/logo.png',
        scale: 2,
      ),
      const Text(
        '岛上码农',
        style: TextStyle(
          fontSize: 36.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)