Nowadays, we all want our apps to look more attractive and more interactive. So, we use different animations to enhance our UI. When it comes to animations, there is no limit to creativity. We can visualize and add our custom animations. But today, we are checking out Animated Text In Flutter.
We can add animations without using any package in Flutter, but Flutter also provides an easy way to add Animated Text In Flutter using animated_text_kit.
You may also check our Flutter app development services page.
Let’s check out how can we add text animations in Flutter.
- Create a new project and add animated_text_kit in pubspec file.
|
1 |
animated_text_kit: ^4.2.2 |
- Import the animated_text_kit package and use AnimatedTextKit.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
AnimatedTextKit(animatedTexts: [ TypewriterAnimatedText("Flutter Animations", textStyle: const TextStyle( fontSize: 32.0, fontWeight: FontWeight.bold, ), speed: const Duration(milliseconds: 500), ), ], totalRepeatCount: 4, pause: const Duration(milliseconds: 1000), displayFullTextOnTap: true, stopPauseOnTap: true, ) |
Analyze this code and check out some properties of AnimatedTextKit.
- pause – the time of the pause between animation texts
- displayFullTextOnTap – tapping the animation will rush it to completion
- isRepeatingAnimations – controls whether the animation repeats
- repeatForever – controls whether the animation repeats forever
- totalRepeatCount – number of times the animation should repeat (when
repeatForeverisfalse)
Also, check these 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 paus
- 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
isRepeatingAnimationis set tofalse.
Let’s check out these Text Animations In Flutter:
Rotate
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
AnimatedTextKit( animatedTexts: [ RotateAnimatedText('FLUTTER', textStyle: TextStyle(color:Colors.blueAccent, fontSize: 25, fontWeight: FontWeight.w500),), RotateAnimatedText('TEXT', textStyle: TextStyle(color:Colors.green,fontSize: 25,fontWeight: FontWeight.w500 )), RotateAnimatedText('ANIMATIONS',textStyle: TextStyle(color:Colors.orange ,fontSize: 25,fontWeight: FontWeight.w500)), ], totalRepeatCount: 4, pause: const Duration(milliseconds: 1000), displayFullTextOnTap: true, stopPauseOnTap: true, onTap: () { print("Tap Event"); }, ), |
Fade
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
AnimatedTextKit( animatedTexts: [ FadeAnimatedText('Flutter',textStyle: TextStyle(color:Colors.blueAccent, fontSize: 25, fontWeight: FontWeight.w500)), FadeAnimatedText('Flutter Text',textStyle: TextStyle(color:Colors.blueAccent, fontSize: 25, fontWeight: FontWeight.w500)), FadeAnimatedText('Flutter Text Animations',textStyle: TextStyle(color:Colors.blueAccent, fontSize: 25, fontWeight: FontWeight.w500)), ], totalRepeatCount: 4, pause: const Duration(milliseconds: 1000), displayFullTextOnTap: true, stopPauseOnTap: true, onTap: () { print("Tap Event"); }, ), |
Colorize
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
class _MyHomePageState extends State<MyHomePage> { static const colorizeColors = [ Colors.purple, Colors.blue, Colors.yellow, Colors.red, ]; @override Widget build(BuildContext context) { return Scaffold( body:Center( child: AnimatedTextKit( animatedTexts: [ ColorizeAnimatedText( 'Flutter', textStyle: TextStyle( fontSize: 50 ), colors: colorizeColors, ), ColorizeAnimatedText( 'Text', textStyle: TextStyle( fontSize: 50 ), colors: colorizeColors, ), ColorizeAnimatedText( 'Animations', textStyle: TextStyle( fontSize: 50 ), colors: colorizeColors, ), ], isRepeatingAnimation: true, pause: const Duration(milliseconds: 1000), displayFullTextOnTap: true, stopPauseOnTap: true, onTap: () { print("Tap Event"); }, ), ), ); } } |
Text Liquid Fill
|
1 2 3 4 5 6 7 8 9 10 11 12 |
TextLiquidFill( text: 'TEXT', waveColor: Colors.blueAccent, boxBackgroundColor: Colors.redAccent, textStyle: TextStyle( fontSize: 80.0, fontWeight: FontWeight.bold, ), boxHeight: 300.0, boxWidth: 300, ), |
Wavy
|
1 2 3 4 5 6 7 8 9 10 11 12 |
AnimatedTextKit( animatedTexts: [ WavyAnimatedText('Hello Flutter',textStyle: TextStyle(color:Colors.blueAccent, fontSize: 25, fontWeight: FontWeight.w500)), ], isRepeatingAnimation: true, pause: const Duration(milliseconds: 1000), displayFullTextOnTap: true, stopPauseOnTap: true, onTap: () { print("Tap Event"); }, ), |
Flicker
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
AnimatedTextKit( animatedTexts: [ FlickerAnimatedText('Hello World!!!', textStyle: TextStyle(color:Colors.lightGreen, fontSize: 25, fontWeight: FontWeight.w500)), FlickerAnimatedText('Flutter Animations', textStyle: TextStyle(color:Colors.amber, fontSize: 25, fontWeight: FontWeight.w500)) ], isRepeatingAnimation: true, pause: const Duration(milliseconds: 1000), displayFullTextOnTap: true, stopPauseOnTap: true, onTap: () { print("Tap Event"); }, ), |
Conclusion:
In this article, I have explained some types of Text animations in Flutter.
Thanks for reading this article.
If I got something wrong, let me know in the comments. I would love to improve.
You can also read – https://mobikul.com/integrate-native-sdks-in-a-flutter-project/