Flutter Text Effects : Add animation to Text

How do we animate text in flutter? So that we can add effects to texts in flutter. In addition, can we get it in a simple way?

Certainly there are different ways. But the simplest way to get the flutter text effects is, no doubt, using the animated text kit package.

Before using the animated text kit package, let’s try to understand how we can get the same flutter text effects.

And to do that we need to recognise the difference between the Implicit Animation and the Explicit Animation in Flutter.

Firstly, the Implicit Animation is much faster than the Explicit Animation.

Why?

Because the Implicit Animation comes with Flutter.

Therefore, the implicitly animated widgets work inside the Flutter Framework.

We do not have to tell the Flutter Framework what to do. 

It knows its job.

Not only that, to avoid the widget rebuilding we can avoid the Stateful Widget. Instead we can use the Provider package. 

On the contrary, the Explicit animations uses the Stateful Widget. It rebuilds the Widget tree.

As a result it uses more system resources. 

Let us see the difference. We have a Text Widget that changes its color.

In the Implicit Animation we set a target value. When we press the ElevatedButton Widget, the color of the Text Widget changes from red to blue.

On the other hand, the Explicit Animation changes the color of Text from green to purple in 1 second.

We do not have to press any Button to get the effect.

How do we get the flutter text effects?

We have discussed this text animation in a previous article.

A simple approach to get the flutter text effects

Certainly, the animated text kit package makes things much simpler for us. 

We don’t have to bother about implicit and explicit animation anymore.

On the other hand we can get an animated flutter text effects in a single line of code.

An image speaks a thousand words. For instance we can see the flutter text effects first.

After that, we can discuss the code.

In our previous implicit and explicit animation examples we have seen how the flutter gets the text effects. In the same vein, different types of colours pass through the text.

As a result, it looks great. 

Firstly, we need to add the dependency to the “pubspec.yaml” file.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  animated_text_kit: ^4.2.1
  google_fonts: ^2.3.2

Secondly, we will take a look at the full code which is self explanatory.

Why? Because we need one property of the “AnimatedTextKit” class. 

What is the property?

We have seen it before in other animated text kit examples.

The “animatedTexts” property expects a list of “ColorizeAnimatedText” classes. 

As a result, the “ColorizeAnimatedText” wants us to provide three values.

import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:google_fonts/google_fonts.dart';

class ColorizeAnimatedTextPage extends StatefulWidget {
  const ColorizeAnimatedTextPage({Key? key}) : super(key: key);

  @override
  State<ColorizeAnimatedTextPage> createState() =>
      _ColorizeAnimatedTextPageState();
}

class _ColorizeAnimatedTextPageState extends State<ColorizeAnimatedTextPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const SizedBox(
                width: 50.0,
                height: 100.0,
              ),
              AnimatedTextKit(
                /// colorize animated text - a new branch
                ///
                animatedTexts: [
                  ColorizeAnimatedText(
                    'Flutter',
                    textStyle: GoogleFonts.adamina(
                      fontSize: 80.0,
                      color: Colors.lightBlue,
                    ),
                    colors: [
                      Colors.purple,
                      Colors.blue,
                      Colors.yellow,
                      Colors.red,
                    ],
                  ),
                  ColorizeAnimatedText(
                    'Is The',
                    textStyle: GoogleFonts.aclonica(
                      color: Colors.green,
                      fontSize: 80.0,
                      fontWeight: FontWeight.bold,
                    ),
                    colors: [
                      Colors.purple,
                      Colors.blue,
                      Colors.yellow,
                      Colors.red,
                    ],
                  ),
                  ColorizeAnimatedText(
                    'Best Tool',
                    textStyle: GoogleFonts.cairo(
                      color: Colors.red,
                      fontSize: 70.0,
                      fontWeight: FontWeight.bold,
                    ),
                    colors: [
                      Colors.purple,
                      Colors.blue,
                      Colors.yellow,
                      Colors.red,
                    ],
                  ),
                ],
                onTap: () {},
              ),
            ],
          ),
        ],
      ),
    );
  }
}

As we have said, the “ColorizeAnimatedText” class expects us to provide values to the three properties.

The first one is a string data type or a text. After that we can add a text style. However, above all we need to provide a list of colours that will pass through the text. 

In short, we don’t have to go for implicit or explicit animations. In other words, we get great flutter text effects with a few lines of code.

Do you want to run the code on your own machine? Please clone the respective GitHub repository branch.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter