Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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 Package.

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.

No any Comments on this Article


Please Wait...