FLUTTER: ANIMATION FOR TEXT

Introduction

In this blog, we’re going to implement some examples of basic text animations in Flutter.

In this, I have used the flutter package which contains a collection of some cool and awesome text animations.

Choosing an approach

There are different approaches you can take when creating animations in Flutter. Which approach is right for you?

Animation types

Generally, animations are either tween- or physics-based. The following sections explain what these terms mean, and point you to resources where you can learn more.

Let’s Start

I have used six types of text animations. The following sections explain what are those types, and point you to resources where you can learn more.

You can override the duration of animation of a 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 the number of times the animation should repeat with totalRepeatCount (or repeat forever with repeatForever). The speed the parameter is also included for some classes which set the delay between the apparition of each character. Also, the displayFullTextOnTap and stopPauseOnTap parameters have been included for some classes.

Rotate

In this, we can rotate our text continuously by making list.

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
),
],
);

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 the list should contain 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,
  ),
);

And, the final app looks like this.