Animated Text Kit In Flutter App-Dart Flutter Makes Animation Easy

In this tutorial, we’ll learn how to properly make use of Flutter animated text kit. Practical code examples will be used to show you how to implement an animated text kit in Flutter.

What is Flutter Animated Text Kit?

If you don’t know about the Flutter text widget then click here, animated text kit is a package that we can use to give our texts some animation effect, like a text that is fading in, or a text that has a typewriter effect. We will look into these types of animations and see how we can implement them in our code.

So without wasting any more time, let’s directly jump into it.

Installation

animated_text_kit: ^4.2.1

Import this package into your app by writing this line in your pubspec.yaml dependency section. Click here to get the latest version of it. After that, run pub get.

flutter pubspec yaml (3)

Implementation In Code

After it’s imported, now let’s implement it in our code. Let’s see how:

AnimatedTextKit(

        animatedTexts: [

          TypewriterAnimatedText(

            'This is an animated text!',

            textStyle: TextStyle(

              fontSize: 20,

              fontWeight: FontWeight.bold,

            ),

            speed: Duration(milliseconds: 200),

          ),

        ],

      )

We have used the animated text kit class and inside it, there is an animated texts constructor which takes a list of animated texts. Using this constructor, we are going to pass our animated texts which will be shown in the app.

Typewriter Animated Text

 TypewriterAnimatedText(

            'This is an animated text!',

            textStyle: TextStyle(

              fontSize: 20,

              fontWeight: FontWeight.bold,

            ),

            speed: Duration(milliseconds: 200),

          )

The typewriter animated text class as the name suggests will animate our text in a typewriting format. The first parameter is a string, we have to define our text here, like in our example, the text is ‘This is an animated text!’. It has a text style constructor as well which styles the text, if you want to learn how to customize a text then click here.

We have given our text a font size of 20 and a bold font weight. The speed constructor of typewriter animated text defines the animation speed of the typing, it takes a duration class which has a milliseconds constructor, we have passed the value 200, you can give it 2000 as well or even more, but remember that, the more value you give, the slower the animation speed gets. Now let’s see our text:

As you can see here, this is how the animation takes place.

Total Repeat Count

totalRepeatCount: 4

It is used to specify how many times the animation will take place, like you see in the above video, it takes place once, but now we have specified it to be animated 4 times. Now it will be animated 4 times and after that, it will stop animation and just the text will be shown on the screen.

Pause Duration

pause: Duration(milliseconds: 100)

It specifies the time gap between animations i.e. after one animation is done like in the above video then it will wait for 100 milliseconds and then again start the animation until it is animated 4 times as we have specified above.

Display Full Text On Tap

displayFullTextOnTap: true

If it is set to true, then if the animation is in progress, which means if the text is animating and you click on the text, it will stop animation and show the complete text.

Animation Repeat Forever

  repeatForever: true,

        isRepeatingAnimation: true,

If repeat forever is true then the animation cycle will repeat forever to infinite times, but we need to make the repeating animation constructor true as well.

Total repeat Count

 totalRepeatCount: 2

If we don’t specify the number of counts then the total repeat count is by default 3, we can also modify it to get our desired amount of counts.

On Tap

onTap: () {
   print('done');
}

It is called when the animated text is clicked.

On Finished

onFinished: () {

          print('done');

        }

The on-finished callback will be called only if the repeating animation constructor is set to false or the number of animations specified is completed.

Fade Text Animation

 FadeAnimatedText('Fade First',

              textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),

              duration: Duration(milliseconds: 600))

We have used the fade animation text, which takes a string, text style and duration like the type write animated text mentioned above, if we used both of them like this:

animatedTexts: [

          FadeAnimatedText('Fade First',

              textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),

              duration: Duration(milliseconds: 600)),

          TypewriterAnimatedText(

            'This is an animated text!',

            textStyle: TextStyle(

              fontSize: 32.0,

              fontWeight: FontWeight.bold,

            ),

            speed: Duration(milliseconds: 200),

          ),

        ]

Then the fade text animation will perform first then the typewriter animation, then again the fad animation for default 3 times, if we haven’t specified the total number of animations. You can use other animations as well like Scale Animated Text which you have to implement in your code and see the outcomes. Comment down your experience as well with us.

Conclusion

So this is how we can use Flutter animated text kit. Hope you have a detailed understanding of how it works. Do leave your feedback in the comment section.

We’d also be glad to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this one.