Animate text in Flutter

Ducafecat WeChat group

B stationspace.bilibili.com/404904528

The original

Medium.com/flutterdevs…

reference

Pub. Dev/packages/an…

The body of the

Animation expects a huge part in updating your application’s overall client experience from visual analysis, motion, and custom animation that you can really imagine! Just like harmonizing something different into an application, animation should be helpful and not basically a normal complex format.

With Flutter, animation is straightforward, and a lot of weird stuff can be perfected with less effort than native Android.

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

Pub. Dev/packages/an…

Introduction to the

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

attribute

Here are some properties of the AnimatedTextKit:

AnimatedText: This property is used to list the AnimatedText for subsequent display in the animation
IsRepeatingAnimation: This property sets 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 sets the number of times the animation should be repeated. By default, it is set to 3
RepeatForever: this property sets whether the animation will repeatForever. If you want to repeat forever, you also need to set the animation to True
OnFinished: This property is used to add onFinished [VoidCallback] to the animation widget. This method will only run if [isRepetingAnimation] is set to false
OnTap: This property is used to add onTap [VoidCallback] to the animation widget
StopPauseOnTap: This property is used for pauses. Do YOU need to delete the remaining pauses? . By default, it is set to false

The installation

Step 1: Add dependencies

Add the dependency to the pubspec.yaml file.

animated_text_kit: ^ 2
Copy the code

Step 2: Import

import 'package:animated_text_kit/animated_text_kit.dart';
Copy the code

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

flutter packages get
Copy the code

How do I implement the code in the DART file

You need to implement it separately in your code:

Create a new DART file called 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’ll discuss this in depth below. When we run the application, we should get screen output like the screenshot below.

Rotate animated text

In the body, we will add a column widget. In the widget, add a Container with a height and a width. Child property, 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(),
        ),
      ),
    ],
  ),
)
Copy the code

In the _rotate() widget. We will return the Row widget. Inside, add text and defaulTextStyle (). It’s a child property, and we’ll add the AnimatedTextKit() widget. Inside, we will add repeatForever to be real, isRepeatingAnimation to be real, and animatedText. In 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'() [[() [[() [() }Copy the code

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

Typewriter animated text

In the body, we will add the same methods as above. But the change in the child property adds 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('- Dali from'
                ,speed: Duration(milliseconds: 100[(), [(), [(), [(), [() }Copy the code

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

Fade out the animated text

In the body, we will add the same methods as above. But if you change the child property, 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),],),),),); }Copy the code

In this widget, we will return SizedBox(). Internally, we’ll add DefaultTextStyle() and the AnimatedTextKit() widget. In this widget, we will add animatedText. Internally, we’ll add four FadeAnimatedText(), including the speed duration, fadeOutBegin, and fadeInEnd. Better than fadeInEnd. When we run the application, we should get screen output like the screen video below.

Zooming animation text

In the body, we will add the same methods as above. But the change in the child property, 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),],),),),); }Copy the code

In this widget, we will return SizedBox(). Internally, we’ll add DefaultTextStyle() and the AnimatedTextKit() widget. In this widget, we will add animatedText. Internally, we’ll add four ScaleAnimatedText() with scalingFactor. ScalingFactor sets the scale factor for the animated text. When we run the application, we should get screen output like the screen video below.

TextLiquidFill animation

In the body, we will add the same methods as above. But if you change the child property, you 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,
        ),
      ),
    ),
  );
}
Copy the code

In this widget, we will return SizedBox(). Internally, 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 screen output like the screen video below.

Animated characters

In the body, we will add the same methods as above. But if you change the child property, 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,),); }Copy the code

In this widget, we will return DefaultTextStyle(). Inside, we’ll 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 screen output like the screen video below.

Flash animated text

In the body, we will add the same methods as above. But the change in the child property, 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[[(), [(), [(), [(); }Copy the code

In this widget, we will return SizedBox(). Internally, we’ll add DefaultTextStyle() and the AnimatedTextKit() widget. In this widget, we will add animatedText. Internally, we’ll add four FlickerAnimatedText() with entryends and speeds. EntryEnd is marked as the end of the text flicker input interval. When we run the application, we should get screen output like the screen video below.

Color animated text

In the body, we will add the same methods as above. But the change in the child property adds a widget of _colorize.

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

In this widget, we will return SizedBox(). Inside, we’ll add the AnimatedTextKit() widget. In this widget, we will add animatedText. Inside, we’ll 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',);Copy the code

Users can change colors based on text. When we run the application, we should get screen output like the screen video below

Typewriter animated text

In the body, we will add the same methods as above. But if you change the child property, 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)),,),),),),); }Copy the code

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

All of the 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'),
        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); }}Copy the code

conclusion

In this article, I’ve briefly explained the basic structure of text animation, and you can modify this code as you choose. This is a small introduction to text animation user interaction from my side and it works using flapping.

ducafecat.tech/

github.com/ducafecat

The issue of

Open source

GetX Quick Start

Github.com/ducafecat/g…

News client

Github.com/ducafecat/f…

Strapi manual translation

getstrapi.cn

Wechat discussion group Ducafecat

A series of collections

The translation

Ducafecat. Tech/categories /…