animated_text_kit 2.4.1

Flutter Android iOS web

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.


Table of contents #

Installing #

1. Depend on it #

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

dependencies:
  animated_text_kit: ^2.4.1

2. Install it #

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter packages get

3. Import it #

Now in your Dart code, you can use:

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.

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 #

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

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

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

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

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

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,
),

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.

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 ☕

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

📖

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

License #

Animated-Text-Kit is licensed under MIT license. View license.

669
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