A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in Codemagic's Ebook, "Flutter libraries we love". Try out our live example app.
![](https://github.com/aagarwal1012/Animated-Text-Kit/raw/master/display/flutter-favorite-badge.png?raw=true&raw=true)
Add this to your package's pubspec.yaml
file:
dependencies:
animated_text_kit: ^4.2.1
You can install packages from the command line:
with pub
:
$ pub get
with Flutter
:
$ flutter pub get
Now in your Dart
code, you can use:
import 'package:animated_text_kit/animated_text_kit.dart';
AnimatedTextKit
is a Stateful Widget that produces text animations.
Include it in your build
method like:
AnimatedTextKit(
animatedTexts: [
TypewriterAnimatedText(
'Hello world!',
textStyle: const TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
),
speed: const Duration(milliseconds: 2000),
),
],
totalRepeatCount: 4,
pause: const Duration(milliseconds: 1000),
displayFullTextOnTap: true,
stopPauseOnTap: true,
)
It has many configurable properties, including:
pause
β the time of the pause between animation textsdisplayFullTextOnTap
β tapping the animation will rush it to completionisRepeatingAnimation
β controls whether the animation repeatsrepeatForever
β controls whether the animation repeats forevertotalRepeatCount
β number of times the animation should repeat (whenrepeatForever
isfalse
)
There are also custom callbacks:
onTap
β This is called when a user taps the animated textonNext(int index, bool isLast)
β This is called before the next text animation, after the previous one's pauseonNextBeforePause(int index, bool isLast)
β This is called before the next text animation, before the previous one's pauseonFinished
- This is called at the end, when the parameterisRepeatingAnimation
is set tofalse
Note: You might come up with an issue that the text
does not get updated with setState
as shown here. The solution to this, is a key that changes based on the text. For reference, watch this video.
Version 3 refactored the code so that common animation controls were moved to
AnimatedTextKit
and all animations, except for TextLiquidFill
, extend from
AnimatedText
. This saved hundreds of lines of duplicate code, increased
consistency across animations, and makes it easier to create new animations.
It also makes the animations more flexible because multiple animations may now be easily combined. For example:
AnimatedTextKit(
animatedTexts: [
FadeAnimatedText(
'Fade First',
textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
),
ScaleAnimatedText(
'Then Scale',
textStyle: TextStyle(fontSize: 70.0, fontFamily: 'Canterbury'),
),
],
),
Using the legacy FadeAnimatedTextKit
is equivalent to using AnimatedTextKit
with FadeAnimatedText
.
An advantage of AnimatedTextKit
is that the animatedTexts
may be any subclass of AnimatedText
, while using FadeAnimatedTextKit
essentially restricts you to using just FadeAnimatedText
.
Have you noticed that animation classes come in pairs?
For example, there is FadeAnimatedText
and FadeAnimatedTextKit
.
The significant refactoring with Version 3 split the original FadeAnimatedTextKit
into FadeAnimatedText
and a re-usable AnimatedTextKit
, then FadeAnimatedTextKit
was adjusted for backwards compatibility.
When introducing a new AnimationText
subclass, you may wonder if you also need to also introduce an additional Kit
class. The answer is NO. π
Going forward, we are championing the adoption of the Version 3 approach, and have deprecated the legacy Kit
classes.
This will make creating new animations easier.
We know it makes some legacy code more verbose, but the flexibility and simplicity is a conscious trade-off.
Many animations are provided, but you can also create your own animations.
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(width: 20.0, height: 100.0),
const Text(
'Be',
style: TextStyle(fontSize: 43.0),
),
const SizedBox(width: 20.0, height: 100.0),
DefaultTextStyle(
style: const TextStyle(
fontSize: 40.0,
fontFamily: 'Horizon',
),
child: AnimatedTextKit(
animatedTexts: [
RotateAnimatedText('AWESOME'),
RotateAnimatedText('OPTIMISTIC'),
RotateAnimatedText('DIFFERENT'),
],
onTap: () {
print("Tap Event");
},
),
),
],
);
Note: You can override transition height by setting the value of parameter transitionHeight
for RotateAnimatedTextKit class.
return SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
),
child: AnimatedTextKit(
animatedTexts: [
FadeAnimatedText('do IT!'),
FadeAnimatedText('do it RIGHT!!'),
FadeAnimatedText('do it RIGHT NOW!!!'),
],
onTap: () {
print("Tap Event");
},
),
),
);
return SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 30.0,
fontFamily: 'Bobbers',
),
child: AnimatedTextKit(
animatedTexts: [
TyperAnimatedText('It is not enough to do your best,'),
TyperAnimatedText('you must know what to do,'),
TyperAnimatedText('and then do your best'),
TyperAnimatedText('- W.Edwards Deming'),
],
onTap: () {
print("Tap Event");
},
),
),
);
return SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 30.0,
fontFamily: 'Agne',
),
child: AnimatedTextKit(
animatedTexts: [
TypewriterAnimatedText('Discipline is the best tool'),
TypewriterAnimatedText('Design first, then code'),
TypewriterAnimatedText('Do not patch bugs out, rewrite them'),
TypewriterAnimatedText('Do not test bugs out, design them out'),
],
onTap: () {
print("Tap Event");
},
),
),
);
return SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 70.0,
fontFamily: 'Canterbury',
),
child: AnimatedTextKit(
animatedTexts: [
ScaleAnimatedText('Think'),
ScaleAnimatedText('Build'),
ScaleAnimatedText('Ship'),
],
onTap: () {
print("Tap Event");
},
),
),
);
const colorizeColors = [
Colors.purple,
Colors.blue,
Colors.yellow,
Colors.red,
];
const colorizeTextStyle = TextStyle(
fontSize: 50.0,
fontFamily: 'Horizon',
);
return SizedBox(
width: 250.0,
child: AnimatedTextKit(
animatedTexts: [
ColorizeAnimatedText(
'Larry Page',
textStyle: colorizeTextStyle,
colors: colorizeColors,
),
ColorizeAnimatedText(
'Bill Gates',
textStyle: colorizeTextStyle,
colors: colorizeColors,
),
ColorizeAnimatedText(
'Steve Jobs',
textStyle: colorizeTextStyle,
colors: colorizeColors,
),
],
isRepeatingAnimation: true,
onTap: () {
print("Tap Event");
},
),
);
Note: colors
list should contains at least two values.
return SizedBox(
width: 250.0,
child: TextLiquidFill(
text: 'LIQUIDY',
waveColor: Colors.blueAccent,
boxBackgroundColor: Colors.redAccent,
textStyle: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
boxHeight: 300.0,
),
);
To get more information about how the animated text made from scratch by @HemilPanchiwala, visit the Medium blog.
return DefaultTextStyle(
style: const TextStyle(
fontSize: 20.0,
),
child: AnimatedTextKit(
animatedTexts: [
WavyAnimatedText('Hello World'),
WavyAnimatedText('Look at the waves'),
],
isRepeatingAnimation: true,
onTap: () {
print("Tap Event");
},
),
);
return SizedBox(
width: 250.0,
child: DefaultTextStyle(
style: const TextStyle(
fontSize: 35,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 7.0,
color: Colors.white,
offset: Offset(0, 0),
),
],
),
child: AnimatedTextKit(
repeatForever: true,
animatedTexts: [
FlickerAnimatedText('Flicker Frenzy'),
FlickerAnimatedText('Night Vibes On'),
FlickerAnimatedText("C'est La Vie !"),
],
onTap: () {
print("Tap Event");
},
),
),
);
You can easily create your own animations by creating new classes that extend
AnimatedText
, just like most animations in this package. You will need to
implement:
- Class constructor β Initializes animation parameters.
initAnimation
β InitializesAnimation
instances and binds them to the givenAnimationController
.animatedBuilder
β Builder method to return aWidget
based onAnimation
values.completeText
β Returns theWidget
to display once the animation is complete. (The default implementation returns a styledText
widget.)
Then use AnimatedTextKit
to display the custom animated text class like:
AnimatedTextKit(
animatedTexts: [
CustomAnimatedText(
'Insert Text Here',
textStyle: const TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
),
),
],
),
If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.
See Contributing.md.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind are welcome! See Contributing.md.