flutter animated text kit
animated text kit is a flutter package which contains a collection of some cool and awesome text animations.
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
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, also colorizeanimationtextkit
can be used for flutter >=0.5.7
which is available in dev
channel.
Comments are closed.