Skip to content
🔔 A flutter package to create cool and beautiful text animations.
Branch: master
Clone or download
Latest commit 69ac9a8 Jan 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Aug 10, 2018
display 💚 added some animations for the roadmap Sep 21, 2018
example 🎉 updated to 1.3.0 Jan 30, 2019
lib Merge branch 'master' of https://github.com/anderscheow/Animated-Text… Jan 30, 2019
test 🎨 fix formating in test file Aug 13, 2018
.gitignore Expand .gitignore, Add flag for running animation once, update gradle. Nov 7, 2018
.travis.yml 🎉 updated version to 1.2.0 Nov 21, 2018
CHANGELOG.md
CODE_OF_CONDUCT.md Added CODE_OF_CONDUCT.md Aug 10, 2018
CONTRIBUTING.md Update travis.yaml and contributing.md Aug 13, 2018
LICENSE Updated LICENSE Aug 9, 2018
PULL_REQUEST_TEMPLATE.md Added pull request template Aug 10, 2018
README.md 🎉 updated to 1.3.0 Jan 30, 2019
pubspec.lock Expand .gitignore, Add flag for running animation once, update gradle. Nov 7, 2018
pubspec.yaml 🎉 updated to 1.3.0 Jan 30, 2019

README.md

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: ^1.3.0

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 each animation by setting its duration in each AnimatedTextKit class, also you can set if the animation should not repeat by changing the value of isRepeatingAnimation to false. For example:

FadeAnimatedTextKit(
  duration: Duration(milliseconds: 5000),
  isRepeatingAnimation: false,
  text: ["do IT!", "do it RIGHT!!", "do it RIGHT NOW!!!"],
  textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
);

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

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.

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.

License

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

You can’t perform that action at this time.