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))),
),

Phuc Tran

Creator of Coflutter.
Daddy at home.
Building education apps!
Follow him on Twitter, Github, StackOverflow, LinkedIn, Upwork.