animated_text_kit 4.0.0
animated_text_kit: ^4.0.0 copied to clipboard

Flutter Android iOS Linux macOS web Windows

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

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".


Platform Pub Package Build Status Codecov Coverage CodeFactor
License: MIT Awesome Flutter Donate


Table of contents #

Installing #

1. Depend on it #

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

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:

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:

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:

    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.

Rotate #

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 #

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 #

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 #

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 #

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 #

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 #

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 #

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:

    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. 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):


Muhammed Salih Guler

🐛

Anders Cheow

🐛 🤔

Rohit Ashiwal

🐛

AdamSGit

🤔 🚧

Hemil Panchiwala

🚧 🤔 📖 💡

YiMing Han

🤔

Aayush Malhotra

🚧 🤔 🐛

Anthony Whitford

🤔 🚧

Jordy Wong

🐛

Darshan Rander

🤔 💻 🎨

Nsiah Akuoko Jeremiah

💻

Aniket Ambore

📖

Abhay V Ashokan

💻

This project follows the all-contributors specification. Contributions of any kind are welcome! See Contributing.md.

1092
likes
110
pub points
98%
popularity

Publisher

ayushagarwal.ml

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

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

characters, flutter

More

Packages that depend on animated_text_kit