text - Flutter 中的渐变文本

Question

我想知道是否可以在文本上创建渐变 flutter 。有一个 gist使用 Dart 的 ui 的文本渐变，但它有点长，我希望更简单。

Answer 1

您可以使用 ShaderMask 来完成该任务。在 ShaderMask 中，您需要设置 BlendMode到 BlendMode.srcIn，“src”表示应用渐变的小部件(在本例中为 Text)，“in”表示只显示 的部分文本 与文本本身的背景重叠的地方(因此不会在背景上应用渐变):

import 'package:flutter/material.dart';

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

用法

GradientText(
  'Hello Flutter',
  style: const TextStyle(fontSize: 40),
  gradient: LinearGradient(colors: [
    Colors.blue.shade400,
    Colors.blue.shade900,
  ]),
),

Live Demo