flutter
animated text kit
animated text kit is a flutter package which contains a collection of some cool and awesome text animations.
![[2025] #1 Animated Text Kit Package animated text kit](https://i0.wp.com/flutterawesome.com/content/images/2018/10/animated-text-kit.gif?w=770&ssl=1)
installing
1. import it
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 duration in each animatedtextkit class. for example:
fadeanimatedtextkit(
duration: duration(milliseconds: 5000),
text: ["do it!", "do it right!!", "do it right now!!!"],
textstyle: textstyle(fontsize: 32.0, fontweight: fontweight.bold),
);
rotate
![[2025] #1 Animated Text Kit Package](https://i0.wp.com/raw.githubusercontent.com/aagarwal1012/animated-text-kit/master/display/rotate.gif?w=770&ssl=1)
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
![[2025] #1 Animated Text Kit Package](https://i0.wp.com/raw.githubusercontent.com/aagarwal1012/animated-text-kit/master/display/fade.gif?w=770&ssl=1)
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
![[2025] #1 Animated Text Kit Package](https://i0.wp.com/raw.githubusercontent.com/aagarwal1012/animated-text-kit/master/display/typer.gif?w=770&ssl=1)
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
![[2025] #1 Animated Text Kit Package](https://i0.wp.com/raw.githubusercontent.com/aagarwal1012/animated-text-kit/master/display/typewriter.gif?w=770&ssl=1)
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
![[2025] #1 Animated Text Kit Package](https://i0.wp.com/raw.githubusercontent.com/aagarwal1012/animated-text-kit/master/display/scale.gif?w=770&ssl=1)
sizedbox(
width: 250.0,
child: scaleanimatedtextkit(
ontap: () {
print("tap event");
},
text: [
"think",
"build",
"ship"
],
textstyle: textstyle(
fontsize: 70.0,
fontfamily: "canterbury"
),
),
);
colorize
![[2025] #1 Animated Text Kit Package](https://i0.wp.com/raw.githubusercontent.com/aagarwal1012/animated-text-kit/master/display/colorize.gif?w=770&ssl=1)
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, also colorizeanimationtextkit
can be used for flutter >=0.5.7
which is available in dev
channel.
Comments are closed.