In this post, let’s learn how to create a Gradient Text in Flutter using ShaderMask.
import 'package:flutter/material.dart';
class GradientText extends StatelessWidget {
final String text;
final Gradient gradient;
final TextStyle? style;
const GradientText({
Key? key,
required this.text,
required this.gradient,
this.style,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ShaderMask(
shaderCallback: (Rect bounds) {
return gradient
.createShader(Rect.fromLTWH(0, 0, bounds.width, bounds.height));
},
child: Text(
text,
style: style,
),
);
}
}
import 'dart:math' as math;
...
GradientText(
text: 'Coflutter',
style: TextStyle(color: Colors.white),
gradient: const LinearGradient(
colors: [Colors.red, Colors.green],
transform: GradientRotation(math.pi * 0.75))),
),
Hi,
It would be great if you add screenshots and video for the tutorial.