Flutter实现Text渐变
-
首先展示效果图
image.png
- 自定义GradientText Widget（直接贴代码）
import 'package:flutter/material.dart';
class GradientText extends StatelessWidget {
GradientText(this.data,
{@required this.gradient,
this.style,
this.textAlign = TextAlign.left});
final String data;
final Gradient gradient;
final TextStyle style;
final TextAlign textAlign;
@override
Widget build(BuildContext context) {
return ShaderMask(
shaderCallback: (bounds) {
return gradient.createShader(Offset.zero & bounds.size);
},
child: Text(
data,
textAlign: textAlign,
style: (style == null)
? TextStyle(color: Colors.white)
: style.copyWith(color: Colors.white),
),
);
}
}
- 使用
ListTile getTitleItem(HeadingItem item, BuildContext context) {
return new ListTile(
title: new GestureDetector(
child: new GradientText(
item.heading,
textAlign: TextAlign.left,
gradient: LinearGradient(colors: [Colors.redAccent, Colors.green]),
style: TextStyle(
fontSize: 30.0,
),
),
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new HomePage()),
);
},
));
}
