text animation
text animation

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

flutter text animation - animated t...
flutter text animation - 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

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

  2. 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,
          ),
Flutter animated typing text

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.

Multiple Animation text in one

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");
              },
            ),
          ),
        ),
      ),
fadeanimatedtext

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....'),

                ]

          ),
        ),
      ),
      ),

For more Animation Effect visit official package site here

Recommended Flutter Post

Flutter Animation – Custom Animation effect

Flutter Rich Text Widget Example