Animated text kit flutter : Tiny Flutter Apps

How do you make animated text in Flutter? Certainly we can use different types of animation widgets that flutter supplies. However, the easiest way is to use the animated text kit.

Animated text kit is a flutter plugin, or package, whatever you want to name it.

The animated text kit package makes our life easier because we don’t have to build the animation from scratch.

For example, let’s see some screenshots first. It will certainly make things clear about what we want to do.

But first thing first. We need to add the dependencies 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

In addition, we have also added the Google font package. Because firstly, we want to make every font look different. And secondly, we want to add different colours.

Let’s see how the text appears on the right hand side. After that the text disappears and another text appears in its place.

The text “Coding” falls from above.

Then the screen goes blank.

And the same thing happens. 

The screen goes blank to make space for another text to appear. 

You can use a list of words to make things look interesting.

As a result, our next word will appear and you have guessed it right. 

It will be “Fluttering”.

In the next screenshot you will find how the word “Fluttering” is disappearing slowly.

At last it vanishes. 

How do you make an animated text flutter?

Let’s see how we can make an animated text in Flutter. We have added the dependency. Meanwhile we will show how we can use the animated text kit package.

The first two steps seem to be easy enough even for flutter beginners.

Let’s see the code.

import 'package:flutter/material.dart';

import 'view/animated_text_example_app.dart';

void main() => runApp(const AnimatedTextExampleApp());

import 'package:flutter/material.dart';

import 'animated_text_example_home_page.dart';

class AnimatedTextExampleApp extends StatelessWidget {
  const AnimatedTextExampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Text Kit',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: const AnimatedTextExampleHomePage(),
    );
  }
}

In our MaterialApp widget, we have used the theme property in a way so that the background is dark.

Next, we call the animated text home page widget where we have used the animated text kit package.

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

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

  @override
  State<AnimatedTextExampleHomePage> createState() =>
      _AnimatedTextExampleHomePageState();
}

class _AnimatedTextExampleHomePageState
    extends State<AnimatedTextExampleHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const SizedBox(
                width: 20.0,
                height: 100.0,
              ),
              Text(
                'Happy',
                style: GoogleFonts.aclonica(
                  color: Colors.green,
                  fontSize: 30.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(
                width: 50.0,
                height: 100.0,
              ),
              DefaultTextStyle(
                style: GoogleFonts.laila(
                  color: Colors.redAccent,
                  fontSize: 60.0,
                  fontWeight: FontWeight.bold,
                ),
                child: AnimatedTextKit(
                  animatedTexts: [
                    RotateAnimatedText('CODING'),
                    RotateAnimatedText('DARTING'),
                    RotateAnimatedText(
                      'FLUTTERING',
                      textStyle: GoogleFonts.aladin(
                        color: Colors.amber,
                        fontSize: 60.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                  onTap: () {},
                  isRepeatingAnimation: true,
                  totalRepeatCount: 10,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

The highlighted parts of the code are telling the whole story. Right? 

We need to add two packages first. 

Firstly, we need the animated text kit package.

Secondly, we need the Google font package.

Finally, we have used those packages where we need them.

How do you animate text size in flutter?

With the help of the animated text kit package, and Google font package, we can easily control the size of the animated text.

Not only that, we can also control colour, font style and many more.

The real magic takes place in this part of the code.

child: AnimatedTextKit(
                  animatedTexts: [
                    RotateAnimatedText('CODING'),
                    RotateAnimatedText('DARTING'),
                    RotateAnimatedText(
                      'FLUTTERING',
                      textStyle: GoogleFonts.aladin(
                        color: Colors.amber,
                        fontSize: 60.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                  onTap: () {},
                  isRepeatingAnimation: true,
                  totalRepeatCount: 10,
                ),

The AnimatedTextKit class comes with various properties. As we notice, each property expects different types of widgets, or values.

Our job is to supply them.

We have not touched the obTap() property which is a VoidCallback function.

In the next sections, we will dig deep and discuss them.

So stay tuned.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter