Animations make the UI more interactive and enhance the user experience. There is no limitation of creativity when it comes to animations or making the application more interactive. In Flutter, we got an easy way to display Animated text. In this article, we will see how we can animate texts using animated_text_kit.
Types of Text Animations:
Following are the types of text animations available with the animated_text_kit package:
- RotatedAnimatedText()
- ScaleAnimatedText()
- FadeAnimatedText()
- TyperAnimatedText()
- WavyAnimatedText()
- FlickerAnimatedText()
We can also create customized animated texts. Let us move to the implementation part of this package.
Install the package:
Add animated_text_kit package to the pubspec.yaml file:
Then configure it using pub get. You can also install the package from the command line by running the following command:
flutter pub add animated_text_kit
Import dependency:
Now, in main.dart file, import the package to use it.
Dart
import 'package:animated_text_kit/animated_text_kit.dart';
|
Implementation:
We use AnimatedTextKit() widget to create animated texts. In the animatedTexts property, we can add as many texts and any type of animated texts like RotatedAnimatedText, FlickerAnimatedText, etc.
Some properties of AnimatedTextKit are –
- animatedTexts
- onTap
- totalRepeatCount
- repeatForever
- pause
- displayFullTextOnTap
- isRepeatingAnimation
RotatedAnimatedText:
Dart
AnimatedTextKit( animatedTexts: [
RotateAnimatedText('AWESOME',
textStyle: TextStyle(
fontSize: 30,
color: Colors.white,
backgroundColor: Colors.blue)),
RotateAnimatedText('OPTIMISTIC',
textStyle: TextStyle(
letterSpacing: 3,
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.orange)),
RotateAnimatedText(
'DIFFERENT',
textStyle: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
),
),
],
isRepeatingAnimation: true,
totalRepeatCount: 10,
pause: Duration(milliseconds: 1000),
),
|
Output:
FadeAnimatedText and ScaleAnimatedText:
Dart
Center( child: AnimatedTextKit(
totalRepeatCount: 40,
animatedTexts: [
FadeAnimatedText(
'First Fade',
textStyle: const TextStyle(
backgroundColor: Colors.green,
color: Colors.white,
fontSize: 32.0,
fontWeight: FontWeight.bold),
),
ScaleAnimatedText(
'Then Get Bigger',
duration: Duration(milliseconds: 4000),
textStyle:
const TextStyle(color: Colors.indigo, fontSize: 50.0),
),
],
),
),
|
Output:
TyperAnimatedText:
Dart
AnimatedTextKit( animatedTexts: [
TyperAnimatedText('This is Animated text,',
textStyle: const TextStyle(
color: Colors.white,
fontSize: 30,
backgroundColor: Colors.purple)),
TyperAnimatedText('You are viewing it here.',
textStyle: const TextStyle(
fontSize: 20, fontWeight: FontWeight.bold)),
],
onTap: () {
print("I am executing");
},
),
|
Output:
WavyAnimatedText:
Dart
AnimatedTextKit( animatedTexts: [
WavyAnimatedText('Hello World',
textStyle: TextStyle(
color: Colors.blue,
fontSize: 30,
)),
WavyAnimatedText('Look at the waves',
textStyle: TextStyle(
color: Colors.green[600],
fontSize: 30,
)),
],
repeatForever: true,
onTap: () {
print("Tap Event");
},
),
|
Output:
Full Source Code:
Dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
} class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animated Text Kit',
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.green),
home: Scaffold(
appBar: AppBar(
title: const Text("GeeksForGeeks"),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedTextKit(
animatedTexts: [
RotateAnimatedText('AWESOME',
textStyle: TextStyle(
fontSize: 30,
color: Colors.white,
backgroundColor: Colors.blue)),
RotateAnimatedText('OPTIMISTIC',
textStyle: TextStyle(
letterSpacing: 3,
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.orange)),
RotateAnimatedText(
'GeeksForGeeks',
textStyle: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
),
),
],
isRepeatingAnimation: true,
totalRepeatCount: 10,
pause: Duration(milliseconds: 1000),
),
// SizedBox(height: 10),
Center(
child: AnimatedTextKit(
totalRepeatCount: 40,
animatedTexts: [
FadeAnimatedText(
'First Fade',
textStyle: const TextStyle(
backgroundColor: Colors.green,
color: Colors.white,
fontSize: 32.0,
fontWeight: FontWeight.bold),
),
ScaleAnimatedText(
'Then Get Bigger',
duration: Duration(milliseconds: 4000),
textStyle:
const TextStyle(color: Colors.indigo, fontSize: 50.0),
),
],
),
),
SizedBox(height: 10),
AnimatedTextKit(
animatedTexts: [
TyperAnimatedText('This is Animated text,',
textStyle: const TextStyle(
color: Colors.white,
fontSize: 30,
backgroundColor: Colors.purple)),
TyperAnimatedText('You are viewing it here.',
textStyle: const TextStyle(
fontSize: 20, fontWeight: FontWeight.bold)),
],
onTap: () {
print("I am executing");
},
),
SizedBox(height: 10),
Center(
child: AnimatedTextKit(
animatedTexts: [
WavyAnimatedText('Hello World',
textStyle: TextStyle(
color: Colors.blue,
fontSize: 30,
)),
WavyAnimatedText('Look at the waves',
textStyle: TextStyle(
color: Colors.green[600],
fontSize: 30,
)),
],
repeatForever: true,
onTap: () {
print("Tap Event");
},
),
),
],
),
));
}
} |
Output: