'Gradient Text in Flutter

I was wondering if it is possible to create a gradient over text Flutter. There is a gist of text gradient using Dart's ui, but it is kinda long and I was hoping to be simpler.

Solution 1:^[1]

You can use ShaderMask for that task. In ShaderMask, you need to set the BlendMode to BlendMode.srcIn, "src" means the widget to apply the gradient to (in this case Text), "in" means only show the part of the Text where it overlaps with the background which is the text itself (so the gradient doesn't get applied on the background):

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

Usage

GradientText(
  'Hello Flutter',
  style: const TextStyle(fontSize: 40),
  gradient: LinearGradient(colors: [
    Colors.blue.shade400,
    Colors.blue.shade900,
  ]),
),

Live Demo

Solution 2:^[2]

Taken from here, you can use Text's style painter.

Create the shader,

final Shader linearGradient = LinearGradient(
  colors: <Color>[Color(0xffDA44bb), Color(0xff8921aa)],
).createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 70.0));

then use it in the TextStyle's foreground

  Text(
        'Hello Gradients!',
        style: new TextStyle(
            fontSize: 60.0,
            fontWeight: FontWeight.bold,
            foreground: Paint()..shader = linearGradient),
      )

Source code

Solution 3:^[3]

Use simple_gradient_text package and create GradienText

GradientText(
    'Gradient Text Example',
    style: TextStyle(
        fontSize: 40.0,
    ),
    colors: [
        Colors.blue,
        Colors.red,
        Colors.teal,
    ],
),

Solution 4:^[4]

First, we import Pkg

Link For PKG

Radial gradient

Click here to see text Style IMAGE

GradientText(
           'Gradient Text Example',
           style: TextStyle(
             fontSize: 40.0,
           ),
           gradientType: GradientType.radial,
           gradientDirection: GradientDirection.ttb,
           radius: 6,
           colors: [
             Color(0xff159DFF),
             Color(0xff002981),
           ],
         ),

Linear gradient

Click here to See Text Style IMAGE

GradientText(
           'Gradient Text Example',
           style: TextStyle(
             fontSize: 40.0,
           ),
           gradientType: GradientType.linear,
           gradientDirection: GradientDirection.ttb,
           radius: .4,
           colors: [
             Color(0xff159DFF),
             Color(0xff002981),
           ],
         ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Raouf Rahiche
Solution 3	Alex
Solution 4	Dharman

'Gradient Text in Flutter

Solution 1:[1]

Usage

Live Demo

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]