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".
# Table of contents
- [Installing](#installing)
- [Usage](#usage)
- [New with Version 3](#new-with-version-3)
- [Animations](#animations)
- [Rotate](#rotate)
- [Fade](#fade)
- [Typer](#typer)
- [Typewriter](#typewriter)
- [Scale](#scale)
- [Colorize](#colorize)
- [TextLiquidFill](#textliquidfill)
- [Wavy](#wavy)
- [Create your own Animations](#create-your-own-animations)
- [Bugs or Requests](#bugs-or-requests)
- [Donate](#donate)
- [Contributors](#contributors)
# Installing
### 1. Depend on it
Add this to your package's `pubspec.yaml` file:
```yaml
dependencies:
animated_text_kit: ^3.1.2
```
### 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:
```dart
import 'package:animated_text_kit/animated_text_kit.dart';
```
# Usage
`AnimatedTextKit` classes are _Stateful Widgets_ that produce text animations.
Include them in your `build` method like:
```dart
TypewriterAnimatedTextKit(
speed: Duration(milliseconds: 2000),
totalRepeatCount: 4,
text: ["do IT!", "do it RIGHT!!", "do it RIGHT NOW!!!"],
textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
pause: Duration(milliseconds: 1000),
displayFullTextOnTap: true,
stopPauseOnTap: true,
);
```
They have many configurable properties, including:
- `pause` – the time of the pause between animation texts
- `displayFullTextOnTap` – tapping the animation will rush it to completion
- `isRepeatingAnimation` – controls whether the animation repeats
- `repeatForever` – controls whether the animation repeats forever
- `totalRepeatCount` – number of times the animation should repeat (when `repeatForever` is `false`)
There are also custom callbacks:
- `onTap` – This is called when a user taps the animated text
- `onNext(int index, bool isLast)` – This is called before the next text animation, after the previous one's pause
- `onNextBeforePause(int index, bool isLast)` – This is called before the next text animation, before the previous one's pause
- `onFinished` - This is called at the end, when the parameter `isRepeatingAnimation` is set to `false`
## 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:
```dart
AnimatedTextKit(
animatedTexts: [
FadeAnimatedText(
'Fade First',
textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
),
ScaleAnimatedText(
'Then Scale',
textStyle: TextStyle(fontSize: 70.0, fontFamily: 'Canterbury'),
),
],
),
```
Using `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`.
# Animations
Many animations are provided, but you can also [create your own animations](#create-your-own-animations).
## Rotate
```dart
Row(
mainAxisSize: MainAxisSize.min,
children: 
```dart
SizedBox(
width: 250.0,
child: FadeAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"do IT!",
"do it RIGHT!!",
"do it RIGHT NOW!!!"
],
textStyle: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold
),
textAlign: TextAlign.start,
),
);
```
## Typer
```dart
SizedBox(
width: 250.0,
child: TyperAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"It is not enough to do your best,",
"you must know what to do,",
"and then do your best",
"- W.Edwards Deming",
],
textStyle: TextStyle(
fontSize: 30.0,
fontFamily: "Bobbers"
),
textAlign: TextAlign.start,
),
);
```
## Typewriter
```dart
SizedBox(
width: 250.0,
child: TypewriterAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"Discipline is the best tool",
"Design first, then code",
"Do not patch bugs out, rewrite them",
"Do not test bugs out, design them out",
],
textStyle: TextStyle(
fontSize: 30.0,
fontFamily: "Agne"
),
textAlign: TextAlign.start,
),
);
```
## Scale
```dart
SizedBox(
width: 250.0,
child: ScaleAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"Think",
"Build",
"Ship"
],
textStyle: TextStyle(
fontSize: 70.0,
fontFamily: "Canterbury"
),
textAlign: TextAlign.start,
),
);
```
## Colorize
```dart
SizedBox(
width: 250.0,
child: ColorizeAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"Larry Page",
"Bill Gates",
"Steve Jobs",
],
textStyle: TextStyle(
fontSize: 50.0,
fontFamily: "Horizon"
),
colors: [
Colors.purple,
Colors.blue,
Colors.yellow,
Colors.red,
],
textAlign: TextAlign.start,
),
);
```
**Note:** `colors` list should contains at least two values.
## TextLiquidFill
```dart
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](https://link.medium.com/AfxVRdkWJ2).
## Wavy
```dart
WavyAnimatedTextKit(
textStyle: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold
),
text: [
"Hello World",
"Look at the waves",
],
isRepeatingAnimation: true,
),
```
## 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` – Initializes `Animation` instances and binds them to the given `AnimationController`.
- `animatedBuilder` – Builder method to return a `Widget` based on `Animation` values.
- `completeText` – Returns the `Widget` to display once the animation is complete. (The default implementation returns a styled `Text` widget.)
Then use `AnimatedTextKit` to display the custom animated text class like:
```dart
AnimatedTextKit(
animatedTexts: [
CustomAnimatedText(
'Insert Text Here',
textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
),
],
),
```
# Bugs or Requests
If you encounter any problems feel free to open an [issue](https://github.com/aagarwal1012/Animated-Text-Kit/issues/new?template=bug_report.md). If you feel the library is missing a feature, please raise a [ticket](https://github.com/aagarwal1012/Animated-Text-Kit/issues/new?template=feature_request.md) on GitHub and I'll look into it. Pull request are also welcome.
See [Contributing.md](https://github.com/aagarwal1012/Animated-Text-Kit/blob/master/CONTRIBUTING.md).
# Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
