Animated Text Kit
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.
Table of contents
Installing
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
animated_text_kit: ^4.1.1
2. Install it
You can install packages from the command line:
with pub:
$ pub get
with Flutter:
$ flutter pub get
3. Import it
Now in your Dart code, you can use:
import 'package:animated_text_kit/animated_text_kit.dart';
Usage
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 (whenrepeatForeverisfalse)
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 parameterisRepeatingAnimationis set tofalse
New with Version 3
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.
Legacy AnimatedTextKit classes
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.
Animations
Many animations are provided, but you can also create your own animations.
Rotate
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.
Fade
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");
},
),
),
);
Typer
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");
},
),
),
);
Typewriter
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");
},
),
),
);
Scale
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");
},
),
),
);
Colorize
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.
TextLiquidFill
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.
Wavy
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");
},
),
);
Create your own Animations
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β InitializesAnimationinstances and binds them to the givenAnimationController.animatedBuilderβ Builder method to return aWidgetbased onAnimationvalues.completeTextβ Returns theWidgetto display once the animation is complete. (The default implementation returns a styledTextwidget.)
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,
),
),
],
),
Bugs or Requests
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.
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind are welcome! See Contributing.md.
![[Proposal] Add onFinishedBeforePause Parameter](https://avatars.githubusercontent.com/u/23037821?v=4)
![[feat] Increase test coverage](https://avatars.githubusercontent.com/u/34043023?v=4)
3 Dec 11, 2021
20 Dec 3, 2022
462 Jan 3, 2023
550 Dec 23, 2022
10 Nov 28, 2022
13 Nov 25, 2020
97 Jan 6, 2023
3 Sep 6, 2021
17 Nov 13, 2022
12 Nov 22, 2022
132 Nov 13, 2022
25 Apr 16, 2021
879 Dec 31, 2022
6 Apr 26, 2022
171 Sep 23, 2022
894 Jan 2, 2023
17 Oct 13, 2022
81 Sep 23, 2022
472 Jan 9, 2023