Let’s understand step by step of how to implement animation in our texts in flutter app, but first if you are new and want a complete setup for building your first app instantly, then click here, now let’s jump directly implementing animated text kit in flutter app.
Introduction
If you don’t know about texts 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 type write effect. We will look into these type of animations and see how we can implement it in our code. So without wasting any more time, lets directly jump into it.
Installation
animated_text_kit: ^4.2.1
Implementation In Code
After its 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 a 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), )
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 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 type writer animation, then again the fad animation for default 3 times, if we haven’t specify 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.
Complete Source Code
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');
},
)),
));
}
}Note:
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks.
