Exploring Text Animations In Flutter
Animations expect a huge part in updating your application’s overall client experience from the visual analysis, motion, and up to the custom animations, you can really imagine!. Like some different things coordinated into an application, animations ought to be helpful rather than basically a normal elaborate format.
Animations are direct to do in Flutter, and a lot of eccentrics can be refined with essentially less effort than native Android.
In this post, we will be Exploring Text Animations In Flutter. We will also implement a demo program of text animations, and show a collection of cool and beautiful text animations using the animated_text_kit package in your flutter applications.
animated_text_kit | Flutter Package
A flutter package that contains a collection of some cool and awesome text animations. Recommended package for text…pub.dev
Table Of Contents ::
Introduction:
A flutter widget package that contains an assortment of some cool and great content animations. We will make extraordinary and excellent content animations utilizing the animated_text_kit package.
To get a more understanding through the help of video , Please watch:
Properties:
There are some of the properties of AnimatedTextKit are:
- > animatedTexts: This property is used to list [AnimatedText] to display subsequently in the animation.
- > isRepeatingAnimation: This property is used to set if the animation should not repeat by changing its value to false. By default, it is set to true.
- > totalRepeatCount: This property is used to sets the number of times animation should repeat. By default, it is set to 3.
- > repeatForever: This property is used to sets if the animation should repeat forever. [isRepeatingAnimation] also needs to be set to true if you want to repeat forever.
- > onFinished: This property is used to adds the onFinished [VoidCallback] to the animated widget. This method will run only if [isRepeatingAnimation] is set to false.
- > onTap: This property is used to adds the onTap [VoidCallback] to the animated widget.
- > stopPauseOnTap: This property is used to on pause, should a tap remove the remaining pause time?. By default, it is set to false.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
animated_text_kit:
Step 2: Import
import 'package:animated_text_kit/animated_text_kit.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called home_page_screen.dart inside the lib folder.
We will create nine different buttons on the home page screen, and when the user taps on the button, the animation will work. There are different animations on all buttons. We will deeply discuss this below. When we run the application, we ought to get the screen’s output like the underneath screen capture.
> Rotate Animation Text:
In the body, we will add a column widget. In this widget, add a Container with height and width. Its child property, add a _rotate() widget.
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(color: Colors.red),
height: 300.0,
width: 350.0,
child: Center(
child: _rotate(),
),
),
],
),
)
In the _rotate() widget. We will return the Row widget. Inside, add text and DefaultTextStyle(). It’s child property, we will add AnimatedTextKit() widget. Inside, we will add repeatForever is true, isRepeatingAnimation was also true, and add animatedTexts. In animatedTexts, we will add three RotateAnimatedText(). Users can also add the duration, rotation.
Widget _rotate(){
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(width: 10.0, height: 100.0),
const Text(
'Flutter',
style: TextStyle(fontSize: 40.0),
),
const SizedBox(width: 15.0, height: 100.0),
DefaultTextStyle(
style: const TextStyle(
fontSize: 35.0,
),
child: AnimatedTextKit(
repeatForever: true,
isRepeatingAnimation: true,
animatedTexts: [
RotateAnimatedText('AWESOME'),
RotateAnimatedText('Text'),
RotateAnimatedText('Animation'),
]),
),
],
);
}
When we run the application, we ought to get the screen’s output like the underneath screen video.
> Typer Animation Text:
In the body, we will add the same method as the above. But changes in child property, add a _typer widget.
Widget _typer(){
return SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 30.0,
fontFamily: 'popin',
),
child: AnimatedTextKit(
isRepeatingAnimation: true,
animatedTexts: [
TyperAnimatedText('When you talk, you are only repeating'
,speed: Duration(milliseconds: 100)),
TyperAnimatedText('something you know.But if you listen,'
,speed: Duration(milliseconds: 100)),
TyperAnimatedText(' you may learn something new.'
,speed: Duration(milliseconds: 100)),
TyperAnimatedText('– Dalai Lama'
,speed: Duration(milliseconds: 100)),
]
),
),
);
}
In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four TyperAnimatedText() with speed duration. When we run the application, we ought to get the screen’s output like the underneath screen video.
> Fade Animation Text:
In the body, we will add the same method as the above. But changes in child property, add a _fade widget.
Widget _fade(){
return SizedBox(
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
),
child: Center(
child: AnimatedTextKit(
repeatForever: true,
animatedTexts: [
FadeAnimatedText('THE HARDER!!',
duration: Duration(seconds: 3),fadeOutBegin: 0.9,fadeInEnd: 0.7),
FadeAnimatedText('YOU WORK!!',
duration: Duration(seconds: 3),fadeOutBegin: 0.9,fadeInEnd: 0.7),
FadeAnimatedText('THE LUCKIER!!!',
duration: Duration(seconds: 3),fadeOutBegin: 0.9,fadeInEnd: 0.7),
FadeAnimatedText('YOU GET!!!!',
duration: Duration(seconds: 3),fadeOutBegin: 0.9,fadeInEnd: 0.7),
],
),
),
),
);
}
In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four FadeAnimatedText() with speed duration, fadeOutBegin, and fadeInEnd. fadeOutBegin was greater than fadeInEnd. When we run the application, we ought to get the screen’s output like the underneath screen video.
> Scale Animation Text:
In the body, we will add the same method as the above. But changes in child property, add a _scale widget.
Widget _scale(){
return SizedBox(
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 50.0,
fontFamily: 'SF',
),
child: Center(
child: AnimatedTextKit(
repeatForever: true,
animatedTexts: [
ScaleAnimatedText('Eat',scalingFactor: 0.2),
ScaleAnimatedText('Code',scalingFactor: 0.2),
ScaleAnimatedText('Sleep',scalingFactor: 0.2),
ScaleAnimatedText('Repeat',scalingFactor: 0.2),
],
),
),
),
);
}
In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four ScaleAnimatedText() with scalingFactor. scalingFactor was set the scaling factor of the text for the animation. When we run the application, we ought to get the screen’s output like the underneath screen video.
> TextLiquidFill Animation:
In the body, we will add the same method as the above. But changes in child property, add a _textLiquidFillAnimation widget.
Widget _textLiquidFillAnimation(){
return SizedBox(
child: Center(
child: TextLiquidFill(
text: 'Flutter Devs',
waveDuration: Duration(seconds: 5),
waveColor: Colors.blue,
boxBackgroundColor: Colors.green,
textStyle: TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.bold,
),
),
),
);
}
In this widget, we will return SizedBox(). Inside, we will add TextLiquidFill() widget. In this widget, we will add text, waveDuration, waveColor, and boxBackgroundColor. When we run the application, we ought to get the screen’s output like the underneath screen video.
> Wavy Animation Text:
In the body, we will add the same method as the above. But changes in child property, add a _wave widget.
Widget _wavy(){
return DefaultTextStyle(
style: const TextStyle(
fontSize: 25.0,
),
child: AnimatedTextKit(
animatedTexts: [
WavyAnimatedText("Flutter is Google's UI toolkit,",
speed: Duration(milliseconds: 200)),
WavyAnimatedText('for building beautiful Apps',
speed: Duration(milliseconds: 200)),
],
isRepeatingAnimation: true,
repeatForever: true,
),
);
}
In this widget, we will return DefaultTextStyle(). Inside, we will add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add two WavyAnimatedText() with the speed duration of the text. When we run the application, we ought to get the screen’s output like the underneath screen video.
> Flicker Animation Text:
In the body, we will add the same method as the above. But changes in child property, add a _flicker widget.
Widget _flicker(){
return SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 30,
),
child: AnimatedTextKit(
repeatForever: true,
animatedTexts: [
FlickerAnimatedText('FlutterDevs specializes in creating,',
speed: Duration(milliseconds: 1000),entryEnd: 0.7),
FlickerAnimatedText('cost-effective and',
speed: Duration(milliseconds: 1000),entryEnd: 0.7),
FlickerAnimatedText("efficient applications!",
speed: Duration(milliseconds: 1000),entryEnd: 0.7),
],
),
),
);
}
In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four FlickerAnimatedText() with entryEnd and speed. entryEnd was marked ending of flickering entry interval of text. When we run the application, we ought to get the screen’s output like the underneath screen video.
> Colorize Animation Text:
In the body, we will add the same method as the above. But changes in child property, add a _colorize widget.
Widget _colorize(){
return SizedBox(
child: Center(
child: AnimatedTextKit(
animatedTexts: [
ColorizeAnimatedText(
'Mobile Developer',
textStyle: colorizeTextStyle,
colors: colorizeColors,
),
ColorizeAnimatedText(
'Software Testing',
textStyle: colorizeTextStyle,
colors: colorizeColors,
),
ColorizeAnimatedText(
'Software Engineer',
textStyle: colorizeTextStyle,
colors: colorizeColors,
),
],
isRepeatingAnimation: true,
repeatForever: true,
),
),
);
}
In this widget, we will return SizedBox(). Inside, we will add add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add three ColorizeAnimatedText() with textStyle and colors.
List<MaterialColor> colorizeColors = [
Colors.red,
Colors.yellow,
Colors.purple,
Colors.blue,
];
static const colorizeTextStyle = TextStyle(
fontSize: 40.0,
fontFamily: 'SF',
);
Users can change color according to text. When we run the application, we ought to get the screen’s output like the underneath screen video
> Typewriter Animation Text:
In the body, we will add the same method as the above. But changes in child property, add a _typeWriter widget.
Widget _typeWriter(){
return SizedBox(
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 30.0,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: AnimatedTextKit(
repeatForever: true,
animatedTexts: [
TypewriterAnimatedText('FlutterDevs specializes in creating cost-effective',
curve: Curves.easeIn,speed: Duration(milliseconds: 80)),
TypewriterAnimatedText('and efficient applications with our perfectly crafted,',
curve: Curves.easeIn,speed: Duration(milliseconds: 80)),
TypewriterAnimatedText('creative and leading-edge flutter app development solutions',
curve: Curves.easeIn,speed: Duration(milliseconds: 80)),
TypewriterAnimatedText('for customers all around the globe.',
curve: Curves.easeIn,speed: Duration(milliseconds: 80)),
],
),
),
),
),
);
}
In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four TypewriterAnimatedText() with curve and speed. When we run the application, we ought to get the screen’s output like the underneath screen video.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_animation_text/colorize_animation_text.dart';
import 'package:flutter_animation_text/fade_animation_text.dart';
import 'package:flutter_animation_text/flicker_animation_text.dart';
import 'package:flutter_animation_text/rotate_animation_text.dart';
import 'package:flutter_animation_text/scale_animation_text.dart';
import 'package:flutter_animation_text/text_liquid_fill_animation.dart';
import 'package:flutter_animation_text/typer_animation_text.dart';
import 'package:flutter_animation_text/typewriter_animated_text.dart';
import 'package:flutter_animation_text/wavy_animation_text.dart';
class HomePageScreen extends StatefulWidget {
@override
_HomePageScreenState createState() => _HomePageScreenState();
}
class _HomePageScreenState extends State<HomePageScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffFFFFFF),
appBar: AppBar(
backgroundColor: Colors.black,
title: Text('Flutter Animations Text Demo'),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// ignore: deprecated_member_use
RaisedButton(
child: Text('Rotate Animation Text',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => RotateAnimationText()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
child: Text('Typer Animation Text',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => TyperAnimationText()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
child: Text('Fade Animation Text',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => FadeAnimationText()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
child: Text('Scale Animation Text',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => ScaleAnimationText()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
child: Text('TextLiquidFill Animation',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => TextLiquidFillAnimation()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
child: Text('Wavy Animation Text',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => WavyAnimationText()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
child: Text('Flicker Animation Text',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => FlickerAnimationText()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
child: Text('Colorize Animation Text',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => ColorizeAnimationText()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
child: Text('Typewriter Animation Text',style: TextStyle(color: Colors.black),),
color: Colors.tealAccent,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => TypewriterAnimationText()));
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
padding: EdgeInsets.all(13),
),
],
),
)
), //center
);
}
}
Conclusion:
In the article, I have explained the basic structure of theText Animations in a flutter; you can modify this code according to your choice. This was a small introduction to Text Animations On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Text Animations in your flutter projects. We will show you what the Introduction is?, some properties using in AnimatedTextKit, and make a demo program for working Text Animations in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
