颤动中的渐变文本
颤动中的渐变文本
提问于 2018-08-04 23:08:10
我想知道是否有可能在文本颤动上创建一个渐变。使用Dart的ui有一个文本渐变的gist，但它有点长，我希望它更简单。
回答 5
Stack Overflow用户
发布于 2019-12-16 23:59:44
您可以使用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,
]),
),
Stack Overflow用户
发布于 2018-08-04 23:08:10
取自here，你可以使用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),
)
Stack Overflow用户
发布于 2021-07-09 05:16:13
使用simple_gradient_text包并创建GradienText
GradientText(
'Gradient Text Example',
style: TextStyle(
fontSize: 40.0,
),
colors: [
Colors.blue,
Colors.red,
Colors.teal,
],
),
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51686868
复制相关文章
相似问题
腾讯云开发者
