Flutter 中的渐变文本

Question

我想知道是否有可能在Flutter中创建文字渐变。有一个使用Dart的ui进行文字渐变的代码片段，但它比较冗长，我希望更简单。

- AbdulMomen عبدالمؤمن

---

https://pub.dartlang.org/packages/gradient_widgets - Shyju M

看一下ShaderMask。可能是最简单的解决方案。 https://api.flutter.dev/flutter/widgets/ShaderMask-class.html - Vladimir Berezkin

请查看此链接 https://bestflutterpack.com/how-to-display-gradient-text-in-flutter/ - Jishnu Chandran

Answer 1

您可以使用ShaderMask来实现这个任务。在ShaderMask中，您需要将BlendMode设置为BlendMode.srcIn，“src”表示要应用渐变的小部件（在此情况下是Text），“in”表示仅显示与背景重叠的Text部分，即文本本身的背景（因此渐变不会应用于背景）：

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,
  ]),
),

实时演示

- NearHuscarl

---

你让我开心。 - nadeesh

出色且功能齐备的答案，感谢朋友。 但是在网络上，我遇到了一些相关的问题。 - Felipe Sales

我使用“BlendMode.dstIn”比“BlendMode.srcIn”获得了更好的结果，但整体解决方案效果很好，谢谢！ - If This Is Art

Answer 2

从此处获取，您可以使用Text的样式绘制器。

创建着色器，

final Shader linearGradient = LinearGradient(
  colors: <Color>[Color(0xffDA44bb), Color(0xff8921aa)],
).createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 70.0));

然后在TextStyle的前景中使用它

  Text(
        'Hello Gradients!',
        style: new TextStyle(
            fontSize: 60.0,
            fontWeight: FontWeight.bold,
            foreground: Paint()..shader = linearGradient),
      )

源代码

- AbdulMomen عبدالمؤمن

---

请注意，此功能仅适用于Flutter版本高于当前的0.51。 - harm

这种方式下界限不准确。 - Raul Mabe

自从Flutter 3.7.0以来，在iOS上似乎不再起作用了。之前是一个很好的解决方案。 - RDO

Answer 3

使用 simple_gradient_text 包创建 GradienText。

GradientText(
    'Gradient Text Example',
    style: TextStyle(
        fontSize: 40.0,
    ),
    colors: [
        Colors.blue,
        Colors.red,
        Colors.teal,
    ],
),

- Alex

Answer 4

首先，我们导入Pkg

PKG链接

径向渐变

GradientText(
           'Gradient Text Example',
           style: TextStyle(
             fontSize: 40.0,
           ),
           gradientType: GradientType.radial,
           gradientDirection: GradientDirection.ttb,
           radius: 6,
           colors: [
             Color(0xff159DFF),
             Color(0xff002981),
           ],
         ),

线性渐变

GradientText(
           'Gradient Text Example',
           style: TextStyle(
             fontSize: 40.0,
           ),
           gradientType: GradientType.linear,
           gradientDirection: GradientDirection.ttb,
           radius: .4,
           colors: [
             Color(0xff159DFF),
             Color(0xff002981),
           ],
         ),

- Muhammad Nadeem