Implement text animation in Flutter

Ducafecat WeChat group

B stationhttps://space.bilibili.com/40…

The original

https://medium.com/flutterdev…

reference

https://pub.dev/packages/anim…

The body of the

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

In Flutter, animation is done straight away, and a lot of wacky stuff can be perfected with less effort than native Android.

In this post, we’ll explore Flutter text animation. We’ll also implement a demo program for text animation and show a cool and beautiful collection of text animations using the Animation Kit in your Flutter application.

https://pub.dev/packages/anim…

Introduction to the

A Flutter little kit that contains some cool and great content animation categories. We will animate extraordinary and excellent content using the animated_text_kit toolkit package.

attribute

Here are some properties of the AnimatedTextKit:

AnimatedTexts: This property is used to list [AnimatedText] for later display in the animation
IsrepeatingAnimation: 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: Total RepeatCount: This property is used to set the number of times an animation should be repeated. By default, this is set to 3
RepeatForever: This property is used to set whether the animation will be repeated forever. You also need to set the animation to true if you want to repeat it forever
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 pausing. Do you need to click to remove the remaining pause time? . 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

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 do I implement the code in a 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 the buttons have different animations. We will discuss this in depth below. When we run the application, we should get the output of the screen as shown in 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. Add an _rotate() widget.

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

In the _rotate() widget. We will return the Row widget. Inside, add text and defaulTextStyle (). It’s a child property, and we’re going to add the animatedTextKit () widget. Inside, we’re going to add RepeatForever is true, isRepeatingAnimation is true, and add AnimatedText. Within AnimatedText, we’re going to add three rotateAnimatedText (). Users can also add duration, rotation.

Widget _rotate(){return Row(mainAxisSize: mainAxisSize.min, children: <Widget (const sizedBox (width: 10.0, height: 0)); 100.0), const Text('Flutter', style: TextStyle(fontSize: 40.0),), const SizedBox(width: 15.0, height: 20.0), 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 body, we’ll add the same method as above. But in the child property changes, add an _typer widget.

Widget _typer(){return sizedBox (width: 250.0, child: defaultTextStyle (style: const textStyle); 30.0, fontFamily: 'popin',), child: AnimatedTextKit(repeatingAnimation: 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(). Internally, we’ll add the defaultTextStyle () and the animatedTextKit () widget. In this widget, we will add animatedText. Inside, we’ll add four typerAnimatedText () with speed durations. When we run the application, we should get the screen output like the screen video below.

Fade out the animated text

In the body, we’ll add the same method as above. But if you change the child property, add an _fade widget.

Widget _fade(){return sizedBox (child: defaultTextStyle (style: const textStyle) (fontSize: 32.0, fontWeight: 32.0); 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(). Internally, we’ll add the 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 the screen output like the screen video below.

Scale Animated Text

In the body, we’ll add the same method as above. But in the child property changes, add an _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: ScaleAnimatedText('Sleep',scalingFactor: 0.2), scaleAnimatedText ('Repeat',scalingFactor: 0.2),],),),); }

In this widget, we will return SizedBox(). Internally, we’ll add the defaultTextStyle () and the animatedTextKit () widget. In this widget, we will add animatedText. Inside, we’ll add four scaleAnimatedText () with scalingFactor. ScalingFactor sets the scalingFactor of the animated text. When we run the application, we should get the screen output like the screen video below.

TextLiquidFill animation

In the body, we’ll add the same method 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: Color. green, textStyle: textStyle (fontSize: 50.0, fontWeight: fontWeight.bold,),),),); }

In this widget, we will return SizedBox(). Inside, we’ll 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 characters

In the body, we’ll add the same method as above. But if you change the child property, add an _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’ll add the animatedTextKit () widget. In this widget, we will add animatedText. Inside, we will add two wavyAnimatedText () and the text’s speed duration. When we run the application, we should get the screen output like the screen video below.

Flashing animated text

In the body, we’ll add the same method as above. But in the child property changes, add an _Flicker widget.

Widget _Flicker (){return sizedBox (width: 250.0, child: defaultTextStyle (style: const textStyle); 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(). Internally, we’ll add the defaultTextStyle () and the animatedTextKit () widget. In this widget, we will add animatedText. Internally, we’ll 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 body, we’ll add the same method as above. But in the child property changes, add 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,
      ),
    ),
  );
}

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

Typewriter animated text

In the body, we’ll add the same method 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: defaultTextStyle (); 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(). Internally, we’ll add the defaultTextStyle () and the animatedTextKit () widget. In this widget, we will add animatedText. Internally, 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 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-IN (PADDING-IN: 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 ); }}

conclusion

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

https://ducafecat.tech/

https://github.com/ducafecat

The issue of

Open source

GetX Quick Start

https://github.com/ducafecat/…

News Client

https://github.com/ducafecat/…

Strapi manual translation

https://getstrapi.cn

WeChat discussion group Ducafecat

A series of collections

The translation

https://ducafecat.tech/catego…