# animated_text_kit 2.5.2

A flutter package project which contains a collection of cool and beautiful text animations.




## Installing
```
export PUB_HOSTED_URL=https://pub.mirror.p-hatan.com
flutter pub add 'animated_text_kit:2.5.2'
```
Published: 2020-11-01T19:46:21.406148Z
Expected archive SHA-256: 49d9508fbb1292805fc81c863aa11553eacbd3345ee8ce082ae2c78037535234

Available in cache; verification: upstream_checksum
## Direct dependencies
- characters: ^1.0.0
- flutter: map[sdk:flutter]

## Package README (untrusted upstream documentation)
<div align="center"><img src="display/cover.gif?raw=true"/></div>

# <div align="center">Animated Text Kit</div>

<div align="center">A flutter package which contains a collection of some cool and awesome text animations.</div><br>  
<div align="center">
  <a href="https://flutter.io">
    <img src="https://img.shields.io/badge/Platform-Flutter-yellow.svg"
      alt="Platform" />
  </a>
  <a href="https://pub.dartlang.org/packages/animated_text_kit">
    <img src="https://img.shields.io/pub/v/animated_text_kit.svg"
      alt="Pub Package" />
  </a>
  <a href="https://travis-ci.com/aagarwal1012/Animated-Text-Kit">
    <img src="https://travis-ci.com/aagarwal1012/Animated-Text-Kit.svg?token=pXLTRcXnVLpccbxqiWBi&branch=master"
      alt="Build Status" />
  </a>
  <a href="https://codecov.io/gh/aagarwal1012/Animated-Text-Kit">
    <img src="https://codecov.io/gh/aagarwal1012/Animated-Text-Kit/branch/master/graph/badge.svg"
      alt="Codecov Coverage" />
  </a>
  <a href="https://www.codefactor.io/repository/github/aagarwal1012/animated-text-kit">
    <img src="https://www.codefactor.io/repository/github/aagarwal1012/animated-text-kit/badge"
      alt="CodeFactor" />
  </a>
  <a href="https://opensource.org/licenses/MIT">
    <img src="https://img.shields.io/badge/License-MIT-red.svg"
      alt="License: MIT" />
  </a>
  <a href="https://www.paypal.me/aagarwal1012">
    <img src="https://img.shields.io/badge/Donate-PayPal-green.svg"
      alt="Donate" />
  </a>
</div><br>

# Table of contents

- [Installing](#installing)
- [Usage](#usage)
  - [Rotate](#rotate)
  - [Fade](#fade)
  - [Typer](#typer)
  - [Typewriter](#typewriter)
  - [Scale](#scale)
  - [Colorize](#colorize)
  - [TextLiquidFill](#textliquidfill)
  - [Wavy](#wavy)
- [Bugs or Requests](#bugs-or-requests)
- [Donate](#donate)
- [Contributors](#contributors)
- [License](#license)

# Installing

### 1. Depend on it

Add this to your package's `pubspec.yaml` file:

```yaml
dependencies:
  animated_text_kit: ^2.5.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

You can override the `duration` of animation of single text by setting its duration in each AnimatedTextKit class, also you can set the time of the pause between texts by setting the `pause` parameter and with this when `isRepeatingAnimation` is set to true, you can set number of times the animation should repeat with `totalRepeatCount` (or repeat forever with `repeatForever`). The `speed` parameter is also included for some classes which sets the delay between the apparition of each characters. Also, the `displayFullTextOnTap` and `stopPauseOnTap` parameters have been included for some classes.

```dart
TypewriterAnimatedTextKit(
  speed: Duration(milliseconds: 2000),
  totalRepeatCount: 4,
  repeatForever: true, //this will ignore [totalRepeatCount]
  pause: Duration(milliseconds:  1000),
  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
);
```

Also, different callbacks are added to each AnimatedTextKit class along with the onTap callback:

- onNext(int index, bool isLast) - This callback will be called before the next text animation, after the previous one's pause.
- onNextBeforePause(int index, bool isLast) - This callback will be called before the next text animation, before the previous one's pause.
- onFinished - This callback is called at the end, if the parameter isRepeatingAnimation is set to false.

## Rotate

<img src="display/rotate.gif?raw=true" align = "right" height = "300px">

```dart
Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    SizedBox(width: 20.0, height: 100.0),
    Text(
      "Be",
      style: TextStyle(fontSize: 43.0),
    ),
    SizedBox(width: 20.0, height: 100.0),
    RotateAnimatedTextKit(
      onTap: () {
        print("Tap Event");
      },
      text: ["AWESOME", "OPTIMISTIC", "DIFFERENT"],
      textStyle: TextStyle(fontSize: 40.0, fontFamily: "Horizon"),
      textAlign: TextAlign.start
    ),
  ],
);
```

**Note:** You can override transition height by setting the value of parameter `transitionHeight` for RotateAnimatedTextKit class.

## Fade

<img src="display/fade.gif?raw=true" align = "right" height = "300px">

```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,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
  ),
);
```

## Typer

<img src="display/typer.gif?raw=true" align = "right" height = "300px">

```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,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
  ),
);
```

## Typewriter

<img src="display/typewriter.gif?raw=true" align = "right" height = "300px">

```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,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
  ),
);
```

## Scale

<img src="display/scale.gif?raw=true" align = "right" height = "300px">

```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,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
  ),
);
```

## Colorize

<img src="display/colorize.gif?raw=true" align = "right" height = "300px">

```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,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
  ),
);
```

**Note:** `colors` list should contains at least two values.

## TextLiquidFill

<img src="display/text_liquid_fill.gif?raw=true" align = "right" height = "300px">

```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

<img src="display/wavy.gif?raw=true" align = "right" height = "300px">

```dart
WavyAnimatedTextKit(
  textStyle: TextStyle(
        fontSize: 32.0,
        fontWeight: FontWeight.bold
    ),
  text: [
    "Hello World",
    "Look at the waves",
  ],
  isRepeatingAnimation: true,
),
```

# 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](CONTRIBUTING.md).

# Donate

> If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a cup of :coffee:
>
> - [PayPal](https://www.paypal.me/aagarwal1012/)

# Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://salih.dev"><img src="https://avatars2.githubusercontent.com/u/24432752?v=4" width="100px;" alt=""/><br /><sub><b>Muhammed Salih Guler</b></sub></a><br /><a href="https://github.com/aagarwal1012/Animated-Text-Kit/issues?q=author%3Asalihgueler" title="Bug reports">🐛</a></td>
    <td align="center"><a href="https://github.com/anderscheow"><img src="https://avatars0.githubusercontent.com/u/11788504?v=4" width="100px;" alt=""/><br /><sub><b>Anders Cheow</b></sub></a><br /><a href="https://github.com/aagarwal1012/Animated-Text-Kit/issues?q=author%3Aanderscheow" title="Bug reports">🐛</a> <a href="#ideas-anderscheow" title="Ideas, Planning, & Feedback">🤔</a></td>
    <td align="center"><a href="https://rashiwal.me/"><img src="https://avatars2.githubusercontent.com/u/31043830?v=4" width="100px;" alt=""/><br /><sub><b>Rohit Ashiwal</b></sub></a><br /><a href="https://github.com/aagarwal1012/Animated-Text-Kit/issues?q=author%3Ar1walz" title="Bug reports">🐛</a></td>
    <td align="center"><a href="https://github.com/AdamSGit"><img src="https://avatars3.githubusercontent.com/u/6126439?v=4" width="100px;" alt=""/><br /><sub><b>AdamSGit</b></sub></a><br /><a href="#ideas-AdamSGit" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-AdamSGit" title="Maintenance">🚧</a></td>
    <td align="center"><a href="https://github.com/hemilpanchiwala"><img src="https://avatars0.githubusercontent.com/u/42446679?v=4" width="100px;" alt=""/><br /><sub><b>Hemil Panchiwala</b></sub></a><br /><a href="#maintenance-hemilpanchiwala" title="Maintenance">🚧</a> <a href="#ideas-hemilpanchiwala" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/aagarwal1012/Animated-Text-Kit/commits?author=hemilpanchiwala" title="Documentation">📖</a> <a href="#example-hemilpanchiwala" title="Examples">💡</a></td>
    <td align="center"><a href="https://yiminghan.com/"><img src="https://avatars1.githubusercontent.com/u/10720534?v=4" width="100px;" alt=""/><br /><sub><b>YiMing Han</b></sub></a><br /><a href="#ideas-yiminghan" title="Ideas, Planning, & Feedback">🤔</a></td>
    <td align="center"><a href="https://github.com/AadumKhor"><img src="https://avatars2.githubusercontent.com/u/37381075?v=4" width="100px;" alt=""/><br /><sub><b>Aayush Malhotra</b></sub></a><br /><a href="#maintenance-AadumKhor" title="Maintenance">🚧</a> <a href="#ideas-AadumKhor" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/aagarwal1012/Animated-Text-Kit/issues?q=author%3AAadumKhor" title="Bug reports">🐛</a></td>
  </tr>
  <tr>
    <td align="center"><a href="https://anthonywhitford.com/"><img src="https://avatars2.githubusercontent.com/u/123887?v=4" width="100px;" alt=""/><br /><sub><b>Anthony Whitford</b></sub></a><br /><a href="#ideas-awhitford" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-awhitford" title="Maintenance">🚧</a></td>
    <td align="center"><a href="https://zzaning.com"><img src="https://avatars3.githubusercontent.com/u/12035097?v=4" width="100px;" alt=""/><br /><sub><b>Jordy Wong</b></sub></a><br /><a href="https://github.com/aagarwal1012/Animated-Text-Kit/issues?q=author%3Aaliyoge" title="Bug reports">🐛</a></td>
    <td align="center"><a href="https://github.com/SirusCodes"><img src="https://avatars0.githubusercontent.com/u/50910066?v=4" width="100px;" alt=""/><br /><sub><b>Darshan Rander</b></sub></a><br /><a href="#ideas-SirusCodes" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/aagarwal1012/Animated-Text-Kit/commits?author=SirusCodes" title="Code">💻</a> <a href="#design-SirusCodes" title="Design">🎨</a> <a href="https://github.com/aagarwal1012/Animated-Text-Kit/commits?author=SirusCodes" title="Documentation">📖</a></td>
    <td align="center"><a href="https://jemmytech.com"><img src="https://avatars3.githubusercontent.com/u/17760450?v=4" width="100px;" alt=""/><br /><sub><b>Nsiah Akuoko Jeremiah</b></sub></a><br /><a href="https://github.com/aagarwal1012/Animated-Text-Kit/commits?author=nakjemmy" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/aniketambore"><img src="https://avatars2.githubusercontent.com/u/52826253?v=4" width="100px;" alt=""/><br /><sub><b>Aniket Ambore</b></sub></a><br /><a href="https://github.com/aagarwal1012/Animated-Text-Kit/commits?author=aniketambore" title="Documentation">📖</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome! See [Contributing.md](CONTRIBUTING.md).

# License

Animated-Text-Kit is licensed under `MIT license`. View [license](LICENSE).

## Changelog
## 2.5.2

**Bug Fixes and Enhancements**

- Bug fix for `ScaleAnimatedTextKit` to check `mounted` before `setState` to avoid potential conflict with `dispose`. Resolves [#105](https://github.com/aagarwal1012/Animated-Text-Kit/issues/105) -- PR [#143](https://github.com/aagarwal1012/Animated-Text-Kit/pull/143)

## 2.5.1

**Bug Fixes and Enhancements**

- Minor bug fix to `RotateAnimatedTextKit` to properly handle `alignment` property, and introduced `textDirection` property [#138](https://github.com/aagarwal1012/Animated-Text-Kit/pull/138)
- Increased test coverage [#128](https://github.com/aagarwal1012/Animated-Text-Kit/issues/128)

## 2.5.0

**Bug Fixes and Enhancements**

- Increase test coverage [#137](https://github.com/aagarwal1012/Animated-Text-Kit/pull/137) and [#135](https://github.com/aagarwal1012/Animated-Text-Kit/pull/135).
- Removed redundant `_texts` variables [#133](https://github.com/aagarwal1012/Animated-Text-Kit/pull/133).
- Added pedantic lint rules. [#132](https://github.com/aagarwal1012/Animated-Text-Kit/pull/132).
- Refactored code to move default logic from the State class to the StatefulWidget [#131](https://github.com/aagarwal1012/Animated-Text-Kit/pull/131).
- Revised `_textKey` to not be a global variable. Resolves [#129](https://github.com/aagarwal1012/Animated-Text-Kit/issues/129) issue -- PR [#130](https://github.com/aagarwal1012/Animated-Text-Kit/pull/130).
- Other basic improvements [#136](https://github.com/aagarwal1012/Animated-Text-Kit/pull/136) and [#134](https://github.com/aagarwal1012/Animated-Text-Kit/pull/134).

## 2.4.1

**Issue Fixed**

- Issue [#125](https://github.com/aagarwal1012/Animated-Text-Kit/issues/125)

## 2.4.0

**Issues Fixed**

- Issue [#124](https://github.com/aagarwal1012/Animated-Text-Kit/pull/124)

- Issue [#123](https://github.com/aagarwal1012/Animated-Text-Kit/pull/123)

- Issue [#122](https://github.com/aagarwal1012/Animated-Text-Kit/pull/122)

- Issue [#121](https://github.com/aagarwal1012/Animated-Text-Kit/pull/121)

## 2.3.0

**New Animated Text**

- Wavy Text by [@SirusCodes](https://github.com/SirusCodes).

**Issues Fixed**

- Issue [#112](https://github.com/aagarwal1012/Animated-Text-Kit/pull/112)

- Issue [#107](https://github.com/aagarwal1012/Animated-Text-Kit/pull/107)

## 2.2.0

**Issues Fixed**

- Issue [#51](https://github.com/aagarwal1012/Animated-Text-Kit/issues/51)

**Code Review** [#81](https://github.com/aagarwal1012/Animated-Text-Kit/pull/81)

- Removed obsolete `new` keywords.
- Added types to collection and function variables.
- Added `final` and `const` keywords.
- Replaced `null` guards with concise `?.` and `??` operators.
- Added missing null check on `dispose` for `FadeAnimatedTextKit`.
- In `fade.dart`, renamed the `_RotatingTextState` class to `_FadeTextState` to be consistent with the overall pattern and avoid confusion with `_RotatingTextState` in `rotate.dart`.

**Warning**:

- Removed `onNextBeforePause` from `ColorizeAnimatedTextKit` because it was not referenced.

## 2.1.0

**Issues Fixed**

- Issue [#58](https://github.com/aagarwal1012/Animated-Text-Kit/issues/58)

- Issue [#44](https://github.com/aagarwal1012/Animated-Text-Kit/issues/44)

**Feature Enhancement**

- Add `repeatForever` option.

  ```dart
  repeatForever: true, //this will ignore [totalRepeatCount]
  ```

## 2.0.1

- Minor updates.

## 2.0.0

- **TextLiquidFill animated text added to the package🎉🎉**

- **Breaking Changes**:
  Different arguments are included in the classes and `duration` has been broken into `speed` and `pause` in some classes as per their needs.

  - `duration` - Change the duration from the animation time of the complete list to single element animation time.
  - `speed` - Time between the display of characters.
  - `pause` - Delay between the animation of texts.
  - `totalRepeatCount` - Sets the number of times animation should repeat
  - `displayFullTextOnTap` - If true, tapping the screen will stop current animated text, and display it fully.
  - `stopPauseOnTap` - If true, tapping during a pause will stop it and start the next text animation.

- **Better control over Animated Texts:**  
  Callbacks added:
  - `onNext(int index, bool isLast)` - This callback will be called before the next text animation, after the previous ones pause.
  - `onNextBeforePause(int index, bool isLast)` - This callback will be called before the next text animation, before the previous one's pause.
  - `onFinished` - This callback is called at the end when the parameter `isRepeatingAnimation` is set to false.

## 1.3.1

- Updated example app readme.
- Added documentation for the various parameters of all the animated widgets.

## 1.3.0

**Feature Enhancement**

- Added attribute to align text.
- Updated Readme.

## 1.2.0

**Feature Enhancement**

- Added attribute to check whether the animation should repeat or not.
- Updated Readme.

## 1.1.1

- Fixed flutter formatting issues.

## 1.1.0

**Feature Enhancement**

- Added onTap callback for all AnimatedText widget.
- Updated Readme.

## 1.0.3

- General update.

## 1.0.2

- Updated Readme.

## 1.0.1

- Initial Release.