Skip to content

Instantly share code, notes, and snippets.

@minhdangoz
Created April 16, 2024 04:37
Show Gist options
  • Save minhdangoz/90b78967a8c53b17bacb5edc4fed2a2d to your computer and use it in GitHub Desktop.
Save minhdangoz/90b78967a8c53b17bacb5edc4fed2a2d to your computer and use it in GitHub Desktop.
Create gradient text effect for Flutter Text widget
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
class GradientText extends StatelessWidget {
const GradientText(
this.text, {
super.key,
required this.gradient,
this.style = const TextStyle(),
});
final String text;
final TextStyle style;
final Gradient gradient;
@override
Widget build(BuildContext context) {
// Get exact size of the text view
final TextPainter _painter = TextPainter(
text: TextSpan(text: text, style: style),
textDirection: TextDirection.rtl);
// Call layout method so width and height of this text widget get measured
_painter.layout();
return CustomPaint(
size: _painter.size,
painter:
_GradientTextPainter(text: text, style: style, gradient: gradient),
);
}
}
class _GradientTextPainter extends CustomPainter {
_GradientTextPainter({
required this.text,
required this.style,
required this.gradient,
});
final Gradient gradient;
final String text;
final TextStyle style;
@override
void paint(Canvas canvas, Size size) {
final Paint _gradientShaderPaint = Paint()
..shader = gradient
.createShader(Rect.fromLTWH(0.0, 0.0, size.width, size.height));
final ui.ParagraphBuilder _builder =
ui.ParagraphBuilder(ui.ParagraphStyle())
..pushStyle(ui.TextStyle(
foreground: _gradientShaderPaint,
fontSize: style.fontSize,
fontWeight: style.fontWeight,
height: style.height,
decoration: style.decoration,
decorationColor: style.decorationColor,
decorationStyle: style.decorationStyle,
fontStyle: style.fontStyle,
letterSpacing: style.letterSpacing,
fontFamily: style.fontFamily,
locale: style.locale,
textBaseline: style.textBaseline,
wordSpacing: style.wordSpacing,
))
..addText(text);
final ui.Paragraph _paragraph = _builder.build();
_paragraph.layout(ui.ParagraphConstraints(width: size.width));
canvas.drawParagraph(_paragraph, Offset.zero);
}
@override
bool shouldRepaint(_GradientTextPainter oldDelegate) {
return gradient != oldDelegate.gradient ||
text != oldDelegate.text ||
style != oldDelegate.style;
}
}
@minhdangoz
Copy link
Author

minhdangoz commented Apr 16, 2024

Screenshot 2024-04-16 at 11 37 36

Looks like this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment