Exploring Text Animations in Flutter with animated_text_kit

Introduction

Animations greatly enhance user experience in applications, and Flutter makes it easy to create a wide range of text animations using the animated_text_kit package. This guide explores how to use the package and demonstrates several animation styles.

Package Overview

The animated_text_kit package provides ready‑made animated text widgets. Its main properties include animatedTexts (list of AnimatedText objects), isRepeatingAnimation, totalRepeatCount, repeatForever, onFinished, onTap, and stopPauseOnTap.

Implementation Steps

1. Add the dependency to pubspec.yaml: animated_text_kit: ^4.2.1<br/> 2. Import the package:

import 'package:animated_text_kit/animated_text_kit.dart';<br/>

3. Run flutter packages get and then create a Dart file (e.g., home_page_screen.dart) to host the demo.

Animation Examples

Rotate Animation

Center(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        decoration: BoxDecoration(color: Colors.red),
        height: 300.0,
        width: 350.0,
        child: Center(child: _rotate()),
      ),
    ],
  ),
)

Widget _rotate(){
  return Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      const SizedBox(width: 10.0, height: 100.0),
      const Text('Flutter', style: TextStyle(fontSize: 40.0)),
      const SizedBox(width: 15.0, height: 100.0),
      DefaultTextStyle(
        style: const TextStyle(fontSize: 35.0),
        child: AnimatedTextKit(
          repeatForever: true,
          isRepeatingAnimation: true,
          animatedTexts: [
            RotateAnimatedText('AWESOME'),
            RotateAnimatedText('Text'),
            RotateAnimatedText('Animation'),
          ],
        ),
      ),
    ],
  );
}

Typer Animation

Widget _typer(){
  return SizedBox(
    width: 250.0,
    child: DefaultTextStyle(
      style: const TextStyle(fontSize: 30.0, fontFamily: 'popin'),
      child: AnimatedTextKit(
        isRepeatingAnimation: true,
        animatedTexts: [
          TyperAnimatedText('When you talk, you are only repeating', speed: Duration(milliseconds: 100)),
          TyperAnimatedText('something you know. But if you listen,', speed: Duration(milliseconds: 100)),
          TyperAnimatedText('you may learn something new.', speed: Duration(milliseconds: 100)),
          TyperAnimatedText('– Dalai Lama', speed: Duration(milliseconds: 100)),
        ],
      ),
    ),
  );
}

Fade Animation

Widget _fade(){
  return SizedBox(
    child: DefaultTextStyle(
      style: const TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
      child: Center(
        child: AnimatedTextKit(
          repeatForever: true,
          animatedTexts: [
            FadeAnimatedText('THE HARDER!!', duration: Duration(seconds: 3), fadeOutBegin: 0.9, fadeInEnd: 0.7),
            FadeAnimatedText('YOU WORK!!', duration: Duration(seconds: 3), fadeOutBegin: 0.9, fadeInEnd: 0.7),
            FadeAnimatedText('THE LUCKIER!!!', duration: Duration(seconds: 3), fadeOutBegin: 0.9, fadeInEnd: 0.7),
            FadeAnimatedText('YOU GET!!!!', duration: Duration(seconds: 3), fadeOutBegin: 0.9, fadeInEnd: 0.7),
          ],
        ),
      ),
    ),
  );
}

Scale Animation

Widget _scale(){
  return SizedBox(
    child: DefaultTextStyle(
      style: const TextStyle(fontSize: 50.0, fontFamily: 'SF'),
      child: Center(
        child: AnimatedTextKit(
          repeatForever: true,
          animatedTexts: [
            ScaleAnimatedText('Eat', scalingFactor: 0.2),
            ScaleAnimatedText('Code', scalingFactor: 0.2),
            ScaleAnimatedText('Sleep', scalingFactor: 0.2),
            ScaleAnimatedText('Repeat', scalingFactor: 0.2),
          ],
        ),
      ),
    ),
  );
}

TextLiquidFill Animation

Widget _textLiquidFillAnimation(){
  return SizedBox(
    child: Center(
      child: TextLiquidFill(
        text: 'Flutter Devs',
        waveDuration: Duration(seconds: 5),
        waveColor: Colors.blue,
        boxBackgroundColor: Colors.green,
        textStyle: TextStyle(fontSize: 50.0, fontWeight: FontWeight.bold),
      ),
    ),
  );
}

Wavy Animation

Widget _wavy(){
  return DefaultTextStyle(
    style: const TextStyle(fontSize: 25.0),
    child: AnimatedTextKit(
      animatedTexts: [
        WavyAnimatedText("Flutter is Google's UI toolkit,", speed: Duration(milliseconds: 200)),
        WavyAnimatedText('for building beautiful Apps', speed: Duration(milliseconds: 200)),
      ],
      isRepeatingAnimation: true,
      repeatForever: true,
    ),
  );
}

Flicker Animation

Widget _flicker(){
  return SizedBox(
    width: 250.0,
    child: DefaultTextStyle(
      style: const TextStyle(fontSize: 30),
      child: AnimatedTextKit(
        repeatForever: true,
        animatedTexts: [
          FlickerAnimatedText('FlutterDevs specializes in creating,', speed: Duration(milliseconds: 1000), entryEnd: 0.7),
          FlickerAnimatedText('cost-effective and', speed: Duration(milliseconds: 1000), entryEnd: 0.7),
          FlickerAnimatedText('efficient applications!', speed: Duration(milliseconds: 1000), entryEnd: 0.7),
        ],
      ),
    ),
  );
}

Colorize Animation

Widget _colorize(){
  return SizedBox(
    child: Center(
      child: AnimatedTextKit(
        animatedTexts: [
          ColorizeAnimatedText('Mobile Developer', textStyle: colorizeTextStyle, colors: colorizeColors),
          ColorizeAnimatedText('Software Testing', textStyle: colorizeTextStyle, colors: colorizeColors),
          ColorizeAnimatedText('Software Engineer', textStyle: colorizeTextStyle, colors: colorizeColors),
        ],
        isRepeatingAnimation: true,
        repeatForever: true,
      ),
    ),
  );
}

List<MaterialColor> colorizeColors = [
  Colors.red,
  Colors.yellow,
  Colors.purple,
  Colors.blue,
];
static const colorizeTextStyle = TextStyle(fontSize: 40.0, fontFamily: 'SF');

Typewriter Animation

Widget _typeWriter(){
  return SizedBox(
    child: DefaultTextStyle(
      style: const TextStyle(fontSize: 30.0),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: AnimatedTextKit(
            repeatForever: true,
            animatedTexts: [
              TypewriterAnimatedText('FlutterDevs specializes in creating cost-effective', curve: Curves.easeIn, speed: Duration(milliseconds: 80)),
              TypewriterAnimatedText('and efficient applications with our perfectly crafted,', curve: Curves.easeIn, speed: Duration(milliseconds: 80)),
              TypewriterAnimatedText('creative and leading-edge flutter app development solutions', curve: Curves.easeIn, speed: Duration(milliseconds: 80)),
              TypewriterAnimatedText('for customers all around the globe.', curve: Curves.easeIn, speed: Duration(milliseconds: 80)),
            ],
          ),
        ),
      ),
    ),
  );
}

Full Demo Page Code

import 'package:flutter/material.dart';
import 'package:flutter_animation_text/colorize_animation_text.dart';
import 'package:flutter_animation_text/fade_animation_text.dart';
import 'package:flutter_animation_text/flicker_animation_text.dart';
import 'package:flutter_animation_text/rotate_animation_text.dart';
import 'package:flutter_animation_text/scale_animation_text.dart';
import 'package:flutter_animation_text/text_liquid_fill_animation.dart';
import 'package:flutter_animation_text/typer_animation_text.dart';
import 'package:flutter_animation_text/typewriter_animated_text.dart';
import 'package:flutter_animation_text/wavy_animation_text.dart';

class HomePageScreen extends StatefulWidget {
  @override
  _HomePageScreenState createState() => _HomePageScreenState();
}

class _HomePageScreenState extends State<HomePageScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffFFFFFF),
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text('Flutter Animations Text Demo'),
        centerTitle: true,
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              // Buttons that navigate to each animation screen (Rotate, Typer, Fade, Scale, TextLiquidFill, Wavy, Flicker, Colorize, Typewriter)
            ],
          ),
        ),
      ),
    );
  }
}

Conclusion

The article demonstrates the basic structure of text animations in Flutter, shows how to configure AnimatedTextKit properties, and provides ready‑to‑run examples for a variety of animation effects. Readers are encouraged to adapt the code to their own projects.