Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

flutter flutter logo animated text kit

animated text kit is a flutter package which contains a collection of some cool and awesome text animations.

animated text kit
animated text kit

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

animated text kit – 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

animated text kit – 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

animated text kit – 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

animated text kit – 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

animated text kit – scale
sizedbox(
  width: 250.0,
  child: scaleanimatedtextkit(
    ontap: () {
        print("tap event");
      },
    text: [
      "think",
      "build",
      "ship"
      ],
    textstyle: textstyle(
        fontsize: 70.0,
        fontfamily: "canterbury"
    ),
  ),
);

colorize

animated text kit – 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.


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

Comments are closed.