animated_text_kit 2.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 99

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.2.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 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(
  duration: 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,
      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.

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.

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

🤔 🚧

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.

2.2.0 #

Issues Fixed

Code Review #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

Feature Enhancement

  • Add repeatForever option.

    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.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

void main() => runApp(MyApp());

const List<String> labels = [
  "Rotate",
  "Fade",
  "Typer",
  "Typewriter",
  "Scale",
  "Colorize",
  "TextLiquidFill"
];

class MyApp extends StatefulWidget {
  /// This widget is the root of your application.
  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Text Kit',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Animated Text Kit'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({
    Key key,
    this.title,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _textAnimationKit = [
    ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        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");
              },
              isRepeatingAnimation: true,
              totalRepeatCount: 10,
              text: ["AWESOME", "OPTIMISTIC", "DIFFERENT"],
              // alignment: Alignment(1.0, 0.5),
              textStyle: TextStyle(fontSize: 40.0, fontFamily: "Horizon"),
            ),
          ],
        ),
      ],
    ),
    FadeAnimatedTextKit(
      onTap: () {
        print("Tap Event");
      },
      text: ["do IT!", "do it RIGHT!!", "do it RIGHT NOW!!!"],
      textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
    ),
    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"),
      ),
    ),
    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"),
      ),
    ),
    ScaleAnimatedTextKit(
      onTap: () {
        print("Tap Event");
      },
      text: ["Think", "Build", "Ship"],
      textStyle: TextStyle(fontSize: 70.0, fontFamily: "Canterbury"),
    ),

    /// colors.length >= 2
    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,
      ],
    ),

    Center(
      child: TextLiquidFill(
        text: 'LIQUIDY',
        waveColor: Colors.blueAccent,
        boxBackgroundColor: Colors.redAccent,
        textStyle: TextStyle(fontSize: 80, fontWeight: FontWeight.bold),
        boxHeight: 300,
      ),
    )
  ];

  List<Color> _colors = [
    Colors.orange[800],
    Colors.brown[600],
    Colors.lightGreen[800],
    Colors.teal[700],
    Colors.blue[700],
    Colors.blueGrey[50],
    Colors.white
  ];

  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          SizedBox(
            height: 40.0,
            width: double.maxFinite,
          ),
          Text(
            labels[_index],
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
          Expanded(
            child: Container(),
          ),
          Container(
            decoration: BoxDecoration(color: _colors[_index]),
            child: Center(child: _textAnimationKit[_index]),
            height: 300.0,
            width: 300.0,
          ),
          Expanded(
            child: Container(),
          ),
          InkWell(
            child: Icon(
              Icons.play_circle_filled,
              size: 70.0,
            ),
            onTap: () {
              setState(() {
                _index = (_index + 1) % _textAnimationKit.length;
              });
            },
          ),
          SizedBox(
            height: 20.0,
            width: double.maxFinite,
          ),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  animated_text_kit: ^2.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:animated_text_kit/animated_text_kit.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
98
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
99
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • animated_text_kit that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test