Jhaymes blog

Text Animation in Flutter

Jhaym3s's photo
Jhaym3s
·

4 min read

Text is a fundamental widget in Flutter, but kinda boring sometimes just sitting there. In this article we would learn to do more with text, we would learn to animate text. The easiest way to do that is to use the animated text kit plugin provided by the flutter team.

Installing the plugin

Head over to the animated text kit, copy the latest version then add it to your project’s `pubspec.YAML file:

dependencies:
 animated_text_kit: ^x.x.x

then run flutter pub get to get it installed in your current project.

Import it

import 'package:animated_text_kit/animated_text_kit..;

Text animation class

We can animate text in different ways such as typeWriter, scale, rotate, TextLiquidFill, and fade which are all types of text animations, to mention a few. All animation controls were moved to AnimatedTextKit and all animations, except for TextLiquidFill, extend from AnimatedText .

AnimatedTextKit

AnimatedTextKit is a stateful widget that produces text animations. That is exclusive to TextLiquidFill cause it does not extend AnimatedText.

AnimatedTextKit comes with some configurable properties, including:

  • pause – the time of the pause between animation texts
  • displayFullTextOnTap – tapping the animation will rush it to completion
  • isRepeatingAnimation – controls whether the animation repeats
  • repeatForever – controls whether the animation repeats forever
  • totalRepeatCount – number of times the animation should repeat (when repeatForever is false)
  • stopPauseOnTap – tapping the text during pause duration would resume animation

There are also custom callbacks:

  • onTap – This is called when a user taps the animated text
  • 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

Typewriter text animation

Include the following code in your build method

return Scaffold(
      body: Center(
        child: AnimatedTextKit(animatedTexts: [
          TypewriterAnimatedText(
            "Hi, Fluttan :)",
            textStyle: TextStyle(fontSize:30),
            speed: Duration(milliseconds:100),
            cursor: "...",
            curve: Curves.linear,
          ),
        ],
        isRepeatingAnimation: true,
        pause: Duration(milliseconds:500),
        displayFullTextOnTap: true,
        repeatForever: true,
        stopPauseOnTap: true,
        )
      ),
    );

Scale Text Animation

return Scaffold(
      body:
      DefaultTextStyle(
        style: TextStyle(fontSize: 50, color: Colors.blue),
              child: Center(
          child: AnimatedTextKit(
            animatedTexts: [
            ScaleAnimatedText('Eat'),
            ScaleAnimatedText('Code',scalingFactor: 4.0),
             ScaleAnimatedText('Sleep',duration: Duration(milliseconds:1000)),//Scales faster

          ],
           isRepeatingAnimation: true,
            pause: Duration(milliseconds:300),
            repeatForever: true,
            ),
        ),
      )
    );

ScaleTextAnimation properties include:

  • scalimgFactor – The higher the scaling factor the higher larger the text scales
  • Duration – How fast the imagination displays

Rotate Text Animation

return Scaffold(
       body: Center(
        child: AnimatedTextKit(
        animatedTexts: [
        RotateAnimatedText('AWESOME',transitionHeight: 100,
        rotateOut: true),
        RotateAnimatedText('OPTIMISTIC'),
        RotateAnimatedText('DIFFERENT'),
        ],
       repeatForever: true,

      ),
    ),
    );

some RotateAnimatedText properties includes:

  • rotateOut – Controls whether the text: rotates in and out (true), or

just rotates in (false).

- transitionHeight – Height the text is rotating through.

Fade Text Animation

return Scaffold(
       body: Center(
        child: DefaultTextStyle(
          style: TextStyle(color: Colors.black,fontSize: 30),
      child: AnimatedTextKit(
      animatedTexts: [
          FadeAnimatedText('Try',fadeInEnd: 0.9,fadeOutBegin: 1),
          FadeAnimatedText('Fail'),
          FadeAnimatedText('Then try again'),
      ],
      repeatForever: true,
    ),
        ),
    ),
    );

some fadeTextAnimation properties include :

  • fadeInEnd - Marks ending of fade-in interval, default value = 0.5. fadeInEnd must always be less than fadeOutBegin.
  • fadeOutBegin - Marks the beginning of fade-out interval, default value = 0.8. fadeOutBegin must never be > 1.

Wavy Text Animation

return Scaffold(
       body: Center(
        child: DefaultTextStyle(
          style: TextStyle(color: Colors.black,fontSize: 30),
                  child:AnimatedTextKit(
    animatedTexts: [
      WavyAnimatedText('We all love sea waves',),
      WavyAnimatedText('How about widget waves?'),
    ],
    isRepeatingAnimation: true,
    repeatForever: true,
  ),
        ),
    ),
    );

Colorized Text Animation

const colorizeTextStyle = TextStyle(
  fontSize: 50.0,
  fontFamily: 'Horizon',
);

return Scaffold(
      body: Center(child: 
      AnimatedTextKit(
    animatedTexts: [
      ColorizeAnimatedText(
        'Google',
        textStyle: colorizeTextStyle,
        colors:[
          Colors.blue,Colors.red,Colors.yellow,Colors.green
        ]
      ),
      ColorizeAnimatedText(
        'Flutter',
        textStyle: colorizeTextStyle,
        colors: [Colors.blue,Colors.white],
      ),
      ColorizeAnimatedText(
        'Joseph\'s coat',
        textStyle: colorizeTextStyle,
        colors: [ 
        Colors.purple,
        Colors.blue,
        Colors.yellow,
        Colors.red,],
      ),
    ],
    isRepeatingAnimation: true,
    repeatForever: true,
  ),),
);

Flicker Text Animation

Scaffold(
       body: Center(
        child: DefaultTextStyle(
          style: TextStyle(color: Colors.purple, fontSize: 50),
                  child: AnimatedTextKit(
          animatedTexts: [
            FlickerAnimatedText('Yay Party!!!',entryEnd:1 ),
          FlickerAnimatedText('Geeks only'),
          ],
       repeatForever: true,

      ),
        ),
    ),
);

Flicker Properties: entryEnd - Marks ending of flickering entry interval of text. Must be <= 1

TextLiquidFill Animation

TextLiquidFill does extend AnimatedText so cannot go under AnimatedTextKit.

return Scaffold(
       body: Center(
        child: DefaultTextStyle(
          style: TextStyle(color: Colors.purple, fontSize: 50),
                  child:TextLiquidFill(
    text: 'LIQUIDY',
    waveColor: Colors.blueAccent,
    boxBackgroundColor: Colors.red[50],
    textStyle: TextStyle(
      fontSize: 80.0,
      fontWeight: FontWeight.bold,
    ),
    boxHeight: 300.0,loadUntil: 0.5,
    waveDuration: Duration(seconds:2)
  ),
        ),
    ),
    );

TextLiquidFill properties include:

  • loadUntil - marks the extent the liquid animation covers. Ranges from 0-1, where 1 == 100%.
  • waveDuration - Specifies the duration that one wave takes to pass the screen.

Typer Text Animation

This is exactly like the typewritertextAnimation just without the cursor property.

return Scaffold(
      body: Center(
        child: AnimatedTextKit(animatedTexts: [
          TyperAnimatedText('It is not enough to do your best,',curve: 
        Curves.bounceIn),
        TyperAnimatedText('you must know what to do,'),
        TyperAnimatedText('and then do your best'),
        TyperAnimatedText('- W.Edwards Deming'),
        ],
        isRepeatingAnimation: true,
        pause: Duration(milliseconds:300),
        displayFullTextOnTap: true,
        repeatForever: true,
        stopPauseOnTap: true,
        )
      ),
    );

Conclusion

All animations that extends the AnimatedText can be combined in a AnimatedText widget. This saved hundreds of lines of duplicate code code sample:

AnimatedTextKit(
  animatedTexts: [
    FadeAnimatedText(
      'Fade First',
      textStyle: TextStyle(fontSize: 32.0, 
      fontWeight: FontWeight.bold),
    ),
    ScaleAnimatedText(
      'Then Scale',
      textStyle: TextStyle(fontSize: 70.0,),
    ),
    RotateAnimatedText('Rotate',transitionHeight: 100,
        rotateOut: true),
    TyperAnimatedText('Type '),
  ],
),
Flutter Widgets