Friday, July 30, 2021

How to display gradient text in Flutter

Flutter Widget to display gradient text.

A Flutter Widget for displaying gradient text, text with a gradient drawn through it.


Getting Started

Add the plugin (pub coming soon):

  gradient_text: ^1.0.2


Import it:

import 'package:gradient_text/gradient_text.dart';

Use it:

GradientText("this is my text",
    gradient: LinearGradient(
    colors: [Colors.deepPurple, Colors.deepOrange,]),
    style: TextStyle(fontSize: 42),


data :: (required) :: The String to be used in the Text Widget

gradient :: (required) :: A gradient to be drawn through the text

style :: (optional) :: TextStyle to be used in the Text Widget. Color is ignored, as the text must be white to have the gradient drawn.

textAlign :: (optional) :: TextAlign to be used in the Text Widget. Default is left.