Text animation in flutter – Animated Text Kit package library

March 26, 2021

3466

Hi Guys, Welcome to Proto Coders Point, In this flutter tutorial we will implement text animation in flutter by using animated text kit flutter package/library.

Introduction to Flutter Animated_Text_Kit package

A Flutter package that contains lots of awesome & cool text animation effects in a flutter, This Animated text package contain animation properties like text rotate animation, fade in fade out animation, flutter animated typing text, scale animation effect, Colorize, TextLiquidFill, Wavy, and much more animation effect is been added in this flutter package.

Official Package site

So Let’s Begin Adding this Library in our flutter Project

Video Tutorial

Installation of Animated_Text_Kit package

Create a new Flutter
Of course, you need to create a new Flutter project or open an existing flutter project where you want to add text anim effect. In my case i am using android studio flutter to implement the same.
Add Dependencies

To add this library to your project just open pubspec.yaml file

and then under dependencies section add it

dependencies:
  animated_text_kit: ^4.1.0

3. Import the animated_text_kit.dart file

Now once you have added the dependencies now you can use the animated text package just by importing the dart file anywhere in your flutter app code.

import 'package:animated_text_kit/animated_text_kit.dart';

Syntax – How to use AnimatedTextKit in flutter

 AnimatedTextKit(
            animatedTexts: [
              TypewriterAnimatedText(
                'Hello world!',
                textStyle: const TextStyle(
                  fontSize: 32.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
               totalRepeatCount: 4,
               pause: const Duration(milliseconds: 1000),
               displayFullTextOnTap: true,
               stopPauseOnTap: true,
          ),

Here in above snippet code, the text animation by default repeats for 3 times only, and with each loop of animation effect will pause for 1 second and repeat the anim again. if you want to repeat animation just add a property totalRepeatCount: #number as done in above snippet.

Customize the animation effect on text – Properties of this Library

pause – The time gap between the next animation texts effect.
displayFullTextOnTap – Then user tap on the animation text with will display the full text.
isRepeatingAnimation – controls whether the animation repeats
repeatForever – set to true if you want the animation to repeat forever until the user is on the screen.
totalRepeatCount – By Default repeat count is 3, to change it just set a repeat count number of times the animation should repeat (when repeatForever is false)

There are also custom callbacks:

onTap – Event to be performed then animation text is pressed.
onNext(int index, bool isLast) – This is called before the next text animation, after the previous one’s pause
onNextBeforePause(int index, bool isLast) – This is called before the next text animation, before the previous one’s pause
onFinished – This is called at the end, when the parameter isRepeatingAnimation is set to false

Combine multiple animation in one

AnimatedTextKit(
              animatedTexts: [
                FadeAnimatedText(
                  'Fade First',
                  textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
                ),
                ScaleAnimatedText(
                  'Then Scale',
                  textStyle: TextStyle(fontSize: 70.0),
                ),
              ],
              repeatForever: true,
       ),

Here in above snippet you see animatedTexts is a list widgets where we can pass more then one widget, it will work step by step means the first widget will run first then the next then the next and so on until the end.

Other text animation effect in this flutter package

RotateAnimationText

Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    const SizedBox(width: 20.0, height: 100.0),
    const Text(
      'Be',
      style: TextStyle(fontSize: 43.0),
    ),
    const SizedBox(width: 20.0, height: 100.0),
    DefaultTextStyle(
      style: const TextStyle(
        fontSize: 40.0,
        fontFamily: 'Horizon',
      ),
      child: AnimatedTextKit(
        animatedTexts: [
          RotateAnimatedText('AWESOME'),
          RotateAnimatedText('OPTIMISTIC'),
          RotateAnimatedText('DIFFERENT'),
        ]
        onTap: () {
          print("Tap Event");
        },
      ),
    ),
  ],
);

FadeAnimatedText

Center(
        child: SizedBox(
          width: 250.0,
          child: DefaultTextStyle(
            style: const TextStyle(
              fontSize: 32.0,
              fontWeight: FontWeight.bold,
            ),
            child: AnimatedTextKit(
              animatedTexts: [
                FadeAnimatedText('Its'),
                FadeAnimatedText('Its Awesome...'),
                FadeAnimatedText('Its Awesome Animation'),
              ],
              onTap: () {
                print("Tap Event");
              },
            ),
          ),
        ),
      ),

TyperAnimationText

 Center(
        child: SizedBox(
          width: 250.0,
          child: DefaultTextStyle(
            style: const TextStyle(
              fontSize: 30.0,
              fontFamily: 'Bobbers',
            ),
            child: AnimatedTextKit(
                animatedTexts: [
                  TyperAnimatedText('A programming language is for thinking about programs, '
                      'not for expressing programs you’ve already thought of. '
                      'It should be a pencil, not a pen....'),

                ]

          ),
        ),
      ),
      ),