How to add Gradient Color Text in Flutter

In this example, we are going to show you how to add different gradient colors on Text in Flutter. Gradient color is a beautiful component to add to Flutter UI. See the example below:

How to Add Gradient Color Text without Package on Flutter:

Text(
    "Hello, Good Morning Everyone!",
    style: new TextStyle(
      fontSize: 30.0,
      fontWeight: FontWeight.bold,
      foreground: Paint()..shader = LinearGradient(
                colors: <Color>[
                    Colors.pinkAccent, 
                    Colors.deepPurpleAccent,
                    Colors.red
                    //add more color here.
                ],
              ).createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 100.0))
    )
)

How to Add Gradient Color Text using simple_gradient_text

GradientText(
    'Flutter Gradient Text Example',
    style: TextStyle(
        fontSize: 50.0,
    ),
    colors: [
        Colors.greenAccent,
        Colors.pinkAccent,
        Colors.teal,
        //add mroe colors here.
    ],
)

You can add Gradient types like linear or circular using this package.

Full Code Example:

import 'package:flutter/material.dart';
import 'package:simple_gradient_text/simple_gradient_text.dart';

void main() {
  runApp(
    MaterialApp( 
      home: MyApp()
    )
  );
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Gradient Text in Flutter"), //appbar title
              backgroundColor: Colors.redAccent //appbar background color
          ),
          body: Container(
            alignment:Alignment.topCenter,
            padding: EdgeInsets.all(15),
             child: Column(
                children:[
                      Text(
                         "Hello, Good Morning Everyone!",
                         style: new TextStyle(
                            fontSize: 30.0,
                            fontWeight: FontWeight.bold,
                            foreground: Paint()..shader = LinearGradient(
                                      colors: <Color>[
                                          Colors.pinkAccent, 
                                          Colors.deepPurpleAccent,
                                          Colors.red
                                          //add more color here.
                                      ],
                                    ).createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 100.0))
                         )
                      ),

                      GradientText(
                          'Flutter Gradient Text Example',
                          style: TextStyle(
                              fontSize: 50.0,
                          ),
                          colors: [
                              Colors.greenAccent,
                              Colors.pinkAccent,
                              Colors.teal,
                              //add mroe colors here.
                          ],
                      ),  
                ]
             )
          )
      );
  }
}

Output is shown at the top.

In this way, you can add Gradient color on text in Flutter using Package or without using Package.