Installing
1. Depend on it
Add this to your package’s pubspec.yaml file:
dependencies:
animated_text_kit: ^1.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 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"), ), ], );
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 ), ), );
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" ), ), );
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" ), ), );
Scale
SizedBox(
width: 250.0,
child: ScaleAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"Think",
"Build",
"Ship"
],
textStyle: TextStyle(
fontSize: 70.0,
fontFamily: "Canterbury"
),
),
);
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,
],
),
);
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.
Next Article : https://flutterappdev.com/2019/01/29/flexible-and-easy-to-use-page-transitions-flutter-app-development/
Credit (github url) : https://github.com/aagarwal1012/Animated-Text-Kit













