Open In App

Animated Text in Flutter

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Animations make the UI more interactive and enhance the user experience. There is no limitation of creativity when it comes to animations or making the application more interactive. In Flutter, we got an easy way to display Animated text. In this article, we will see how we can animate texts using animated_text_kit.

Types of Text Animations:

Following are the types of text animations available with the animated_text_kit package:

  1. RotatedAnimatedText()
  2.  ScaleAnimatedText()
  3. FadeAnimatedText()
  4. TyperAnimatedText()
  5. WavyAnimatedText()
  6.  FlickerAnimatedText()

We can also create customized animated texts. Let us move to the implementation part of this package.

Install the package:

Add animated_text_kit package to the pubspec.yaml file:

Then configure it using pub get. You can also install the package from the command line by running the following command:

flutter pub add animated_text_kit

Import dependency:

Now, in main.dart file, import the package to use it.

Dart




import 'package:animated_text_kit/animated_text_kit.dart';


Implementation:

We use AnimatedTextKit() widget to create animated texts. In the animatedTexts property, we can add as many texts and any type of animated texts like RotatedAnimatedText, FlickerAnimatedText, etc. 

Some properties of AnimatedTextKit are – 

  • animatedTexts
  • onTap
  • totalRepeatCount
  • repeatForever
  • pause
  • displayFullTextOnTap
  • isRepeatingAnimation

RotatedAnimatedText: 

Dart




AnimatedTextKit(
                animatedTexts: [
                  RotateAnimatedText('AWESOME',
                      textStyle: TextStyle(
                          fontSize: 30,
                          color: Colors.white,
                          backgroundColor: Colors.blue)),
                  RotateAnimatedText('OPTIMISTIC',
                      textStyle: TextStyle(
                          letterSpacing: 3,
                          fontSize: 30,
                          fontWeight: FontWeight.bold,
                          color: Colors.orange)),
                  RotateAnimatedText(
                    'DIFFERENT',
                    textStyle: TextStyle(
                      fontSize: 30,
                      decoration: TextDecoration.underline,
                    ),
                  ),
                ],
                isRepeatingAnimation: true,
                totalRepeatCount: 10,
                pause: Duration(milliseconds: 1000),
              ),


Output:

FadeAnimatedText and ScaleAnimatedText: 

Dart




Center(
                child: AnimatedTextKit(
                  totalRepeatCount: 40,
                  animatedTexts: [
                    FadeAnimatedText(
                      'First Fade',
                      textStyle: const TextStyle(
                          backgroundColor: Colors.green,
                          color: Colors.white,
                          fontSize: 32.0,
                          fontWeight: FontWeight.bold),
                    ),
                    ScaleAnimatedText(
                      'Then Get Bigger',
                      duration: Duration(milliseconds: 4000),
                      textStyle:
                          const TextStyle(color: Colors.indigo, fontSize: 50.0),
                    ),
                  ],
                ),
              ),


Output:

TyperAnimatedText:

Dart




AnimatedTextKit(
                 animatedTexts: [
                   TyperAnimatedText('This is Animated text,',
                       textStyle: const TextStyle(
                           color: Colors.white,
                           fontSize: 30,
                           backgroundColor: Colors.purple)),
                   TyperAnimatedText('You are viewing it here.',
                       textStyle: const TextStyle(
                           fontSize: 20, fontWeight: FontWeight.bold)),
                 ],
                 onTap: () {
                   print("I am executing");
                 },
               ),


Output:

WavyAnimatedText:

Dart




AnimatedTextKit(
                  animatedTexts: [
                    WavyAnimatedText('Hello World',
                        textStyle: TextStyle(
                          color: Colors.blue,
                          fontSize: 30,
                        )),
                    WavyAnimatedText('Look at the waves',
                        textStyle: TextStyle(
                          color: Colors.green[600],
                          fontSize: 30,
                        )),
                  ],
                  repeatForever: true,
                  onTap: () {
                    print("Tap Event");
                  },
                ),


Output:

Full Source Code:

Dart




import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Animated Text Kit',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.green),
        home: Scaffold(
          appBar: AppBar(
            title: const Text("GeeksForGeeks"),
            centerTitle: true,
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              AnimatedTextKit(
                animatedTexts: [
                  RotateAnimatedText('AWESOME',
                      textStyle: TextStyle(
                          fontSize: 30,
                          color: Colors.white,
                          backgroundColor: Colors.blue)),
                  RotateAnimatedText('OPTIMISTIC',
                      textStyle: TextStyle(
                          letterSpacing: 3,
                          fontSize: 30,
                          fontWeight: FontWeight.bold,
                          color: Colors.orange)),
                  RotateAnimatedText(
                    'GeeksForGeeks',
                    textStyle: TextStyle(
                      fontSize: 30,
                      decoration: TextDecoration.underline,
                    ),
                  ),
                ],
                isRepeatingAnimation: true,
                totalRepeatCount: 10,
                pause: Duration(milliseconds: 1000),
              ),
              //  SizedBox(height: 10),
              Center(
                child: AnimatedTextKit(
                  totalRepeatCount: 40,
                  animatedTexts: [
                    FadeAnimatedText(
                      'First Fade',
                      textStyle: const TextStyle(
                          backgroundColor: Colors.green,
                          color: Colors.white,
                          fontSize: 32.0,
                          fontWeight: FontWeight.bold),
                    ),
                    ScaleAnimatedText(
                      'Then Get Bigger',
                      duration: Duration(milliseconds: 4000),
                      textStyle:
                          const TextStyle(color: Colors.indigo, fontSize: 50.0),
                    ),
                  ],
                ),
              ),
  
              SizedBox(height: 10),
              AnimatedTextKit(
                animatedTexts: [
                  TyperAnimatedText('This is Animated text,',
                      textStyle: const TextStyle(
                          color: Colors.white,
                          fontSize: 30,
                          backgroundColor: Colors.purple)),
                  TyperAnimatedText('You are viewing it here.',
                      textStyle: const TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold)),
                ],
                onTap: () {
                  print("I am executing");
                },
              ),
  
              SizedBox(height: 10),
              Center(
                child: AnimatedTextKit(
                  animatedTexts: [
                    WavyAnimatedText('Hello World',
                        textStyle: TextStyle(
                          color: Colors.blue,
                          fontSize: 30,
                        )),
                    WavyAnimatedText('Look at the waves',
                        textStyle: TextStyle(
                          color: Colors.green[600],
                          fontSize: 30,
                        )),
                  ],
                  repeatForever: true,
                  onTap: () {
                    print("Tap Event");
                  },
                ),
              ),
            ],
          ),
        ));
  }
}


Output:



Last Updated : 31 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads