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
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), )
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
Pause Duration
pause: Duration(milliseconds: 100)
Display Full Text On Tap
displayFullTextOnTap: true
Animation Repeat Forever
repeatForever: true, isRepeatingAnimation: true,
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');
}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.
Source code of Flutter Animated Text
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Animated Text Kit',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: AnimatedTextKit(
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),
),
],
pause: Duration(milliseconds: 100),
displayFullTextOnTap: true,
totalRepeatCount: 2,
onFinished: () {
print('done');
},
)),
));
}
}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.
