Animation is the thing that makes your app look and feels nice and especially text animation can make your app alive. If your app has simple yet beautiful animation then it makes the user experience so smooth and unforgettable.
In this article, we will learn about Text Animation in Flutter and how we can turn a simple text into a beautiful animated text. We will work on a simple app that will have text in the center widget of our application Scaffold widget.
I am assuming that you will create a sample project with any name of your choice and you have a home page that only has a stateful widget
(and name it whatever you want).
For this tutorial we will use the animated_text_kit package you can find it on www.https://pubs.dev just search for animated_text_kit in the search field. This is a very useful package for animating the text and also it is very easy to use.
Let’s start
Add the Text Animation takes a number of steps:
Step1:
Create a flutter project name it whatever you want in our case we name it simple_animated_text for creating a flutter project use this command.
flutter create simple_text_animation
Step2:
Now add the dependencies to your project’s pubspec.yaml file for adding use this command.
flutter pub add animated_text_kitOr in your public.yaml file add this line under the dependencies section
dependencies:
animated_text_kit: ^4.2.2Step3:
Create the home_page.dart file inside the lib folder. For the main.dart file you can use this code
import 'simple_text_animation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const SimpleTextAnimation(),
);
}
}
Step4:
Make a dart file and name it simple_text_animation.dart. Create a stateful class and name it SimpleTextAnimation. And under the _SimpleTextAnimationState return the Scaffold widget and for the body of the Scaffold use a center widget like this
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Text Animation'),
),
body: Center(),
);
}
Step5:
Don’t forget to import the package in your simple_text_animation.dart
import 'package:animated_text_kit/animated_text_kit.dart';Step6:
Now we will use the AnimatedTextKit widget for animating the text. Remember we use the Center widget for the body of the Scaffold now for the child of the Center widget we use the AnimatedTextKit widget. This widget is responsible for animating the text. It has several properties that we will use for this tutorial and I will explain the properties of this widget.
You can use AnimatedTextKit as below code example:
Center(
child: AnimatedTextKit(
animatedTexts: [
TypewriterAnimatedText(
'Text Animation!',
textStyle: const TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
),
speed: const Duration(milliseconds: 200),
),
],
totalRepeatCount: 2,
pause: const Duration(milliseconds: 1000),
displayFullTextOnTap: true,
stopPauseOnTap: true,
),
),
This example will animate text like Type Writer.
The AnimatedTextKit has some properties I will explain one by one.
- pause – It is the pause time between text animations.
- displayFullTextOnTap – if you tap on the text the animation will stop.
- repeat forever – if you want to make your animation repeat itself continually then give a bool true value to it.
- totalRepeatCount – this takes an integer value it will set the number of times you want your animation to happen.
There are some callbacks too
- onTap: this is fired when the user taps on text.
- unfinished: this is fired at the end of the animation.
- onNext(int I, bool isLast): This is fired before the next text animation and after the previous one’s pause.
- onNextBeforePause(int I, bool isLast) – this will fire before the next text animation, before the previous one’s pause
Step: 7
Now we will take look at a different types of text animation that this widget provides us with the typewriter-like animation we have already seen.
now we will use scale-type animation it will scale (in size) your text. And we will see onTap callback we only print something to the terminal when the user clicks on text.
Center(
child: AnimatedTextKit(
animatedTexts: [
ScaleAnimatedText(
'Scale',
textStyle: TextStyle(fontSize: 30),
),
ScaleAnimatedText(
'Text',
textStyle: TextStyle(fontSize: 30),
),
ScaleAnimatedText(
'Animation',
textStyle: TextStyle(fontSize: 30),
),
],
onTap: () {
print("Tap Event");
},
),
),
The next example is Fade text animation it will fade the text.
Center(
child: AnimatedTextKit(
animatedTexts: [
FadeAnimatedText(
'this !!',
textStyle: TextStyle(fontSize: 30),
),
FadeAnimatedText(
'Is !!',
textStyle: TextStyle(fontSize: 30),
),
FadeAnimatedText(
'Fade Animation !!',
textStyle: TextStyle(fontSize: 30),
),
],
onTap: () {
print("Tap Event");
},
),
Next is Wavy text animation it will animate text like it’s waving. Here is the example code:
Center(
child: AnimatedTextKit(
animatedTexts: [
WavyAnimatedText(
'Wavy Text',
textStyle: TextStyle(fontSize: 30),
),
WavyAnimatedText(
'Animation',
textStyle: TextStyle(fontSize: 30),
),
],
isRepeatingAnimation: true,
onTap: () {
print("Tap Event");
},
),
Next is TextLiquidFill text animation and it is my favorite because we can use it with a splash screen to create a beautiful splash screen. Its use is a little different
Scaffold(
body: Container(
color: Colors.black,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Center(
child: TextLiquidFill(
text: 'LIQUIDY',
waveColor: Colors.blueAccent,
// boxBackgroundColor: Colors.redAccent,
textStyle: const TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
boxHeight: 300.0,
),
),
),
);
Package Link (Here)
For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.
Remember FlutterDecode.com