Implement text animation in Flutter

WeChat group ducafecat

b Station https://space.bilibili.com/404904528

original

https://medium.com/flutterdevs/exploring-text-animations-in-flutter-9b74103940d2

reference

https://pub.dev/packages/animated_text_kit

text

Animation is expected to be a huge part of the overall client experience in updating your application from visual analysis, movement, and custom animation, you can really imagine! Just like coordinating some different things in the application, animation should be helpful, not basically a normal complex format.

In Flutter, animation is done directly, and many weird things can be improved with less effort than native Android.

In this post, we will explore Flutter text animation. We will also implement a text animation for a demo program, and display a cool and beautiful text animation collection using the animation toolkit in your Flutter application.

https://pub.dev/packages/animated_text_kit

Introduction

A Flutter small toolkit that contains some cool and great content animation categories. We will make extraordinary and excellent content animations using the animation animated_text_kit kit.

Attributes

The following are some attributes of AnimatedTextKit:

animatedTexts: animated text: this property is used to list [AnimatedText] for subsequent display in animation
isRepeatingAnimation: Repeating animation: This property is used to set whether the animation should be repeated by changing its value to false. By default, it is set to true
totalRepeatCount: Cumulative repeat count: This property is used to set the number of times the animation should repeat. By default, it is set to 3
repeatForever: This property is used to set whether the animation will repeat forever. If you want to repeat forever, you also need to set the animation to true
onFinished: This attribute is used to add onFinished [VoidCallback] to the animation widget. This method will only run when [isrepetinganimation] is set to false
onTap: This attribute is used to add onTap [VoidCallback] to the animation widget
stopPauseOnTap: This attribute is used to pause, do I need to click to delete the remaining pause time? . By default, it is set to false

installation

Step 1: add dependencies

Add dependencies to the pubspec.yaml file.

animated_text_kit: ^4.2.1

Step 2: Import

import 'package:animated_text_kit/animated_text_kit.dart';

Step 3: Run the flutter package in the root directory of the application.

flutter packages get

How to implement the code in the dart file

You need to implement it in your code separately:

Create a new dart file named home_page_screen.dart in the lib folder.

We will create nine different buttons on the home screen, and when the user clicks the button, the animation will work. All buttons have different animation effects. We will discuss this issue in depth below. When we run the application, we should get the output of the screen, just like the screenshot below.

Rotate animated text

In the body, we will add a column widget. In this widget, add a Container with height and width. Its sub-attribute, add a _rotate() widget.

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

In the _rotate() widget. We will return to the Row widget. Inside, add text and defaultextstyle(). It is a sub-property and we will add the AnimatedTextKit() widget. In it, we will add repeatForever is true, isRepeatingAnimation is also true, and add animatedtext. In the animatedtext, we will add three RotateAnimatedText(). Users can also add duration, rotation.

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

When we run the application, we should get the screen output like the screen video below.

Typewriter animated text

In the main text, we will add the same method as above. But in the changes in the sub-properties, add a _typer widget.

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

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add the AnimatedTextKit() widget. In this widget, we will add animatedtext. Internally, we will add four TyperAnimatedText() with speed duration. When we run the application, we should get the screen output like the screen video below.

Fade out animated text

In the main text, we will add the same method as above. But if you change the sub-attributes, add a _fade widget.

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

}

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add the AnimatedTextKit() widget. In this widget, we will add animatedtext. Internally, we will add 4 FadeAnimatedText(), including velocity duration, fadeOutBegin and fadeInEnd. Better than fadeInEnd. When we run the application, we should get the screen output like the screen video below.

Scale animated text

In the main text, we will add the same method as above. But in the changes in the sub-properties, add a _scale widget.

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

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add the AnimatedTextKit() widget. In this widget, we will add animatedtext. Internally, we will add four ScaleAnimatedText() with scalingFactor. scalingFactor sets the scaling factor of the animated text. When we run the application, we should get the screen output like the screen video below.

TextLiquidFill animation

In the main text, we will add the same method as above. But if you change the sub-attribute, add a _textLiquidFillAnimation widget.

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

In this widget, we will return SizedBox(). Inside, we will add the TextLiquidFill() widget. In this widget, we will add text, waveDuration, waveColor, and boxBackgroundColor. When we run the application, we should get the screen output like the screen video below.

Animated text

In the main text, we will add the same method as above. But if you change the sub-attributes, add a _wave widget.

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

In this widget, we will return DefaultTextStyle(). Inside, we will add the AnimatedTextKit() widget. In this widget, we will add animatedtext. Internally, we will add two WavyAnimatedText() and the speed duration of the text. When we run the application, we should get the screen output like the screen video below.

Flash animated text

In the main text, we will add the same method as above. But in the changes in the sub-properties, add a _flicker widget.

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

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add the AnimatedTextKit() widget. In this widget, we will add animatedtext. Inside, we will add four FlickerAnimatedText() with entryEnd and speed. entryEnd is marked as the end of the text blinking input interval. When we run the application, we should get the screen output like the screen video below.

Color animated text

In the main text, we will add the same method as above. But in the sub-attribute changes, add a _colorize widget.

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

In this widget, we will return SizedBox(). Inside, we will add the AnimatedTextKit() widget. In this widget, we will add animatedtext. Inside, we will add three colorizeanmatedtext() with textStyle and color.

List<MaterialColor> colorizeColors = [
  Colors.red,
  Colors.yellow,
  Colors.purple,
  Colors.blue,
];

static const colorizeTextStyle = TextStyle(
  fontSize: 40.0,
  fontFamily: 'SF',
);

The user can change the color according to the text. When we run the application, we should get the screen output like the following screen video

Typewriter animated text

In the main text, we will add the same method as above. But if you change the sub-attribute, add the _typeWriter widget.

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

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add the AnimatedTextKit() widget. In this widget, we will add animatedtext. Inside, we will add four typewriter animated text () with curves and speed. When we run the application, we should get the screen output like the screen video below.

All codes

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'),
        automaticallyImplyLeading: false,
        centerTitle: true,
      ),
      body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[

                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Rotate Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed:() {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder:(context) => RotateAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),
                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Typer Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed:() {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder:(context) => TyperAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Fade Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed:() {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder:(context) => FadeAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Scale Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed:() {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder:(context) => ScaleAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('TextLiquidFill Animation',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed:() {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder:(context) => TextLiquidFillAnimation()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Wavy Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed:() {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder:(context) => WavyAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Flicker Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed:() {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder:(context) => FlickerAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Colorize Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed:() {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder:(context) => ColorizeAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),

                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Typewriter Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed:() {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder:(context) => TypewriterAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),

              ],
            ),
          )
      ), //center
    );
  }
}

to sum up

In this article, I have briefly explained the basic structure of text animation, you can modify this code according to your choice. This is a small introduction to text animation user interaction from my side, it works using flutter.

https://ducafecat.tech/

https://github.com/ducafecat