我想知道是否有可能在文本颤动上创建一个渐变。使用Dart的ui有一个文本渐变的gist,但它有点长,我希望它更简单。
发布于 2019-12-16 15: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,
]),
),
发布于 2018-08-04 15: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),
)
发布于 2021-07-08 21:16:13
使用simple_gradient_text包并创建GradienText
GradientText(
'Gradient Text Example',
style: TextStyle(
fontSize: 40.0,
),
colors: [
Colors.blue,
Colors.red,
Colors.teal,
],
),
https://stackoverflow.com/questions/51686868
复制