Make Your Flutter App More Beautiful With “Animated Text Kit”

Designing a flutter app is my favorite work. Its really easy as well as crucial. But, can we make the boring🥱 texts in our apps interesting😎? Yes, we can.

Animated Text Kit

A flutter package which contains a collection of some cool and awesome text animations.

This is the final result:

How To Make Use of It?

1. For using it, add the package into your project’s pubspec.yaml.
dependencies:
animated_text_kit: ^4.2.1

2. Now, import it into the main.dart of your project.
import ‘package:animated_text_kit/animated_text_kit.dart’;

The Animated Text Kit package provides a wide range of text animations. Let’s check them out!

Animations Provided

TextLiquidFill
Wavy
Fade
Colorize
Scale
Typer
Rotate
Flicker
Typewriter

Let’s look at them one by one!

TextLiquidFill

1. Make a new stful widget named AnimationExample.
2. Return a Scaffold widget with a body of Center widget.
3. Add a Column widget in place of the child property of the Center widget.
   Wrap it with Padding widget.
   Also wrap it with SingleChildScrollView because we are going to make a lot of animations on one screen.
4. Set the mainAxisAlignMent and crossAxisAlignment to center.
5. Add the children property.
6. Add a SizedBox to leave some space from the top.
7. Add another SizedBox with a some height.
8. Add the TextLiquidFill widget in place of the child property of the SizedBox widget.
9. Give it some style using the textStyle property which takes in the TextStyle widget.
10. Add text property which takes in a String and decides the text that needs to be liquifi.
11. Add waveColor property which takes in a Color widget and decides the color of the wave.
12. Add boxBackgroundColor property which takes in a Color widget too and changes the color of the box in which the text lies.
13. Add boxHeight property which takes in a double and changes the box height.

return Scaffold(
  body: Center(
    child: SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 20,
            ),
            SizedBox(
              height: 90,
              child: TextLiquidFill(
                boxHeight: 90.0,
                textStyle: TextStyle(
                    color: Colors.white,
                    fontSize: 60,
                    fontWeight: FontWeight.bold),
                boxBackgroundColor: Colors.black,
                text: 'Flutter',
                waveColor: Colors.blueAccent,
              ),
            ),

Wavy

1. Add a SizedBox with some height.
2. Add the DefaultTextStyle widget in place of the child property of the SizedBox widget.
   Give it some style using the style property which takes in the TextStyle widget.
3. Place the AnimatedTextKit widget in place of the child property of the DefaultTextStyle widget.
4. Add the repeatForever property which takes in a boolean value. Make it true. isRepeatingAnimation also needs to be set to true if you want to repeat forever.
5. Add the property animatedTexts to the AnimatedTextKit widget, which takes in children.
6. Add the WavyAnimatedText widget which takes in a String. Add as many as you want.

SizedBox(
  height: 60,
  child: DefaultTextStyle(
    style: TextStyle(
      color: Colors.teal,
      fontSize: 40,
    ),
    child: AnimatedTextKit(
      repeatForever: true,
      isRepeatingAnimation: true,
      animatedTexts: [
        WavyAnimatedText('Hello World!'),
        WavyAnimatedText('Flutter has grown!'),
      ],
    ),
  ),
),

Fade

1. Add a SizedBox with a some height.
2. Now, add a widget named DefaultTextStyle to the child property of the SizedBox widget.
   (DefaultTextStyle takes a provided Animation to animate changes in text style smoothly over time.)
   Give it some style using the style property which takes in the TextStyle widget.
3. Provide it with some style using TextStyle widget in place of the style property.
4. Place the AnimatedTextKit widget in place of the child property of the DefaultTextStyle widget.
5. Add the repeatForever property which takes in a boolean value. Make it true. isRepeatingAnimation also needs to be set to true if you want to repeat forever.
6. Add the property animatedTexts to the AnimatedTextKit widget, which takes in children.
7. Add the FadeAnimatedText widget which takes in a String. Add as many as you want.

SizedBox(
  height: 55,
  child: DefaultTextStyle(
    style: TextStyle(
      fontStyle: FontStyle.italic,
      fontWeight: FontWeight.bold,
      color: Colors.blueAccent,
      fontSize: 35,
    ),
    child: AnimatedTextKit(
      repeatForever: true,
      isRepeatingAnimation: true,
      animatedTexts: [
        FadeAnimatedText(
          'Flutter is cool!',
        ),
        FadeAnimatedText(
          'Flutter is amazing!',
        ),
        FadeAnimatedText(
          'Flutter is spectacular!',
        ),
      ],
    ),
  ),
),

Colorize

1. Add a SizedBox with some height.
2. Add the AnimatedTextKit widget in place of the child property of the SizedBox widget.
3. Add the repeatForever property which takes in a boolean value. Make it true. isRepeatingAnimation also needs to be set to true if you want to repeat forever.
4. Add the property animatedTexts to the AnimatedTextKit widget, which takes in children.
5. Add the ColorizeAnimatedText widget which takes in a String. Add as many as you want.
   It requires a textStyle and colors property. The colors property takes in a List<Color>.
6. Let’s make 2 const for that. Now, add those 2 to their respective properties.

const colorizeColors = [
  Colors.black,
  Colors.blue,
  Colors.orange,
  Colors.red,
];

const colorizeTextStyle = TextStyle(
  fontSize: 50.0,
  fontWeight: FontWeight.bold,
);

SizedBox(
  height: 70,
  child: AnimatedTextKit(
    repeatForever: true,
    isRepeatingAnimation: true,
    animatedTexts: [
      ColorizeAnimatedText(
        'Alibaba',
        textStyle: colorizeTextStyle,
        colors: colorizeColors,
      ),
      ColorizeAnimatedText(
        'BMW',
        textStyle: colorizeTextStyle,
        colors: colorizeColors,
      ),
      ColorizeAnimatedText(
        'Google Ads',
        textStyle: colorizeTextStyle,
        colors: colorizeColors,
      ),
    ],
  ),
),

Scale

1. Add a SizedBox with some height.
2. Add the DefaultTextStyle widget in place of the child property of the SizedBox widget.
   Give it some style using the style property which takes in the TextStyle widget.
3. Place the AnimatedTextKit widget in place of the child property of the DefaultTextStyle widget.
4. Add the repeatForever property which takes in a boolean value. Make it true. isRepeatingAnimation also needs to be set to true if you want to repeat forever.
5. Add the property animatedTexts to the AnimatedTextKit widget, which takes in children.
6. Add the ScaleAnimatedText widget which takes in a String. Add as many as you want.

SizedBox(
  height: 70,
  child: DefaultTextStyle(
    style: TextStyle(
      color: Colors.redAccent,
      fontWeight: FontWeight.w200,
      fontSize: 50,
    ),
    child: AnimatedTextKit(
      repeatForever: true,
      isRepeatingAnimation: true,
      animatedTexts: [
        ScaleAnimatedText('Build apps'),
        ScaleAnimatedText('Android'),
        ScaleAnimatedText('IOS'),
        ScaleAnimatedText('Web'),
      ],
    ),
  ),
),

Typer

1. Add a SizedBox with some height.
2. Add the DefaultTextStyle widget in place of the child property of the SizedBox widget.
   Give it some style using the style property which takes in the TextStyle widget.
3. Place the AnimatedTextKit widget in place of the child property of the DefaultTextStyle widget.
4. Add the repeatForever property which takes in a boolean value. Make it true. isRepeatingAnimation also needs to be set to true if you want to repeat forever.
5. Add the property animatedTexts to the AnimatedTextKit widget, which takes in children.
6. Add the TyperAnimatedText widget which takes in a String. Add as many as you want.

SizedBox(
  height: 65,
  child: DefaultTextStyle(
    style: TextStyle(
      color: Colors.orange,
      fontSize: 45,
    ),
    child: AnimatedTextKit(
      repeatForever: true,
      isRepeatingAnimation: true,
      animatedTexts: [
        TyperAnimatedText('Learn from docs,'),
        TyperAnimatedText('courses, youtube'),
        TyperAnimatedText('and many more.'),
      ],
    ),
  ),
),

Rotate

1. Add a Row widget.
2. Set the mainAxisAlignMent and crossAxisAlignment to center.
3. Add the children property.
4. Add a Text widget and style it a little.
5. Add a SizedBox with some height.
6. Add the DefaultTextStyle widget in place of the child property of the SizedBox widget.
   Give it some style using the style property which takes in the TextStyle widget.
7. Place the AnimatedTextKit widget in place of the child property of the DefaultTextStyle widget.
8. Add the repeatForever property which takes in a boolean value. Make it true. isRepeatingAnimation also needs to be set to true if you want to repeat forever.
9. Add the property animatedTexts to the AnimatedTextKit widget, which takes in children.
10. Add the RotateAnimatedText widget which takes in a String. Add as many as you want.

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      'Flutter apps are ',
      style: TextStyle(color: Colors.green, fontSize: 30),
    ),
    SizedBox(
      height: 70,
      child: DefaultTextStyle(
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.green,
          fontSize: 35,
        ),
        child: AnimatedTextKit(
          repeatForever: true,
          isRepeatingAnimation: true,
          animatedTexts: [
            RotateAnimatedText('fast'),
            RotateAnimatedText('smooth'),
            RotateAnimatedText('beautiful'),
          ],
        ),
      ),
    ),
  ],
),

Flicker

1. Add a SizedBox with some height.
2. Add the DefaultTextStyle widget in place of the child property of the SizedBox widget.
   Give it some style using the style property which takes in the TextStyle widget.
3. Place the AnimatedTextKit widget in place of the child property of the DefaultTextStyle widget.
4. Add the repeatForever property which takes in a boolean value. Make it true. isRepeatingAnimation also needs to be set to true if you want to repeat forever.
5. Add the property animatedTexts to the AnimatedTextKit widget, which takes in children.
6. Add the FlickerAnimatedText widget which takes in a String. Add as many as you want.

SizedBox(
  height: 70,
  child: DefaultTextStyle(
    style: TextStyle(
      color: Colors.grey,
      fontSize: 50,
    ),
    child: AnimatedTextKit(
      repeatForever: true,
      isRepeatingAnimation: true,
      animatedTexts: [
        FlickerAnimatedText('Android Studio'),
        FlickerAnimatedText('VS Code'),
        FlickerAnimatedText('IntelliJ IDEA'),
      ],
    ),
  ),
),

Typewriter

1. Add a SizedBox with some height.
2. Add the DefaultTextStyle widget in place of the child property of the SizedBox widget.
   Give it some style using the style property which takes in the TextStyle widget.
3. Place the AnimatedTextKit widget in place of the child property of the DefaultTextStyle widget.
4. Add the repeatForever property which takes in a boolean value. Make it true. isRepeatingAnimation also needs to be set to true if you want to repeat forever.
5. Add the property animatedTexts to the AnimatedTextKit widget, which takes in children.
6. Add the TypewriterAnimatedText widget which takes in a String. Add as many as you want.

SizedBox(
  height: 70,
  child: DefaultTextStyle(
    style: TextStyle(
        color: Colors.purple,
        fontSize: 50,
        fontWeight: FontWeight.w900),
    child: AnimatedTextKit(
      repeatForever: true,
      isRepeatingAnimation: true,
      animatedTexts: [
        TypewriterAnimatedText('Keep learning!'),
        TypewriterAnimatedText('Keep building!'),
        TypewriterAnimatedText('Keep fluttering!'),
      ],
    ),
  ),
),

There is a property of all these widgets named speed, which you can use to increase or decrease the speed of the writings. But I like the default one.

That’s all🏁 about this awesome, flutter favorite package, Animated Text Kit.
Hope you liked this article.

Make sure to hit the claps👏if you liked this article🙂
If I got something wrong❌, mention it in the comments.

Buy me a coffee☕ to show me your support.

You can get the complete code here👈

Reach me out at LinkedIn, GitHub and Twitter.