What do we mean by typing animation in flutter? It’s a kind of animation that helps us to make the text to type in automatically, instead of just displaying right away.
We have already seen different types of text animations.
Firstly, in this tiny flutter apps series, we have seen animation that rotates the text.
Secondly, we have seen animation where the text automatically fades in and fades out.
Finally, In this section, we will see how we can animate the text to type in one letter after another letter.
We will do that with the help of the animated text kit package.
The Animated Text Kit package has made the typing animation in flutter easy.
The package constructor has a property called “animatedTexts” which expects a list of “TyperAnimatedText” class where we can pass the text as a string.
In addition, we can also add some text styling.
First thing first.
We need to add the dependency to the “pubspec.yaml” file.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
animated_text_kit: ^4.2.1
google_fonts: ^2.3.2We have been trying to build tiny flutter apps where we’ve been learning one trick everyday.
If you take an interest in learning fade transition, we have discussed that before in our animation category.
Don’t forget to check it out.
As usual, we will take a look at the screenshots first, to see how the fade animation in flutter works.
After that, we will discuss the code.
What do we find in the above images?
Since we have added a list of widgets and passed a series of string data types as text, we can have many lines of text.
When we need typing animation flutter?
We may need typing animation in flutter in many cases.
However, it depends.
Why?
Because we don’t want our flutter app to type in a series of texts without stopping. Right?
As a result, we need to use this typing animation in flutter judiciously.
As we have seen in our previous animated text kit examples, every class has some VoidCallback functions.
They are as follows.
onFinished → VoidCallback?
Adds the onFinished VoidCallback to the animated widget. [...]
final
onNext → (void Function?(int, bool)?)
Adds the onNext callback to the animated widget. [...]
final
onNextBeforePause → (void Function?(int, bool)?)
Adds the onNextBeforePause callback to the animated widget. [...]
final
onTap → VoidCallback?
Adds the onTap VoidCallback to the animated widget.
finalYou may have guessed it right.
Each Void Callback function has its own characteristic.
From the rotate animation class we have navigated to the fade animation class. Right?
But, to do that, we have used the “onTap” property.
child: AnimatedTextKit(
animatedTexts: [
RotateAnimatedText('CODING'),
RotateAnimatedText('DARTING'),
RotateAnimatedText(
'FLUTTERING',
textStyle: GoogleFonts.aladin(
color: Colors.amber,
fontSize: 60.0,
fontWeight: FontWeight.bold,
),
),
],
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const FadeAnimatedTextExample(),
),
);
},
isRepeatingAnimation: true,
totalRepeatCount: 10,
),
// for full code please visit the GitHub repositoryAs a result, when we click the rotated animated text, we navigate to the fade animation examples.
But in the faded animation text class we have decided to use the “onFinished” VoidCallback function.
What is the difference between “onTap” and “onFinished”
A big difference is there between these two VoidCallback functions.
What is that?
We can click the “onTap” any time.
However, we don’t have to click the “onFinished” VoidCallback function.
Once the fade animation in flutter completes its life cycle, it automatically navigates to the typing animation widget.
AnimatedTextKit(
animatedTexts: [
FadeAnimatedText(
'NOW!',
textStyle: GoogleFonts.aclonica(
color: Colors.green,
fontSize: 60.0,
fontWeight: FontWeight.bold,
),
),
FadeAnimatedText(
'AT ONCE!!',
textStyle: GoogleFonts.cairo(
color: Colors.red,
fontSize: 70.0,
fontWeight: FontWeight.bold,
),
),
FadeAnimatedText(
'OR NEVER!!!',
textStyle: GoogleFonts.mandali(
color: Colors.yellow,
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
),
],
onFinished: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const TyperAnimatedTextPage(),
),
);
},
totalRepeatCount: 1,
),
// for full code please visit GitHub repositoryAs an outcome, we get the typing animation effect in flutter.
Let’s see the code.
It’s as simple as we have seen before.
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:google_fonts/google_fonts.dart';
class TyperAnimatedTextPage extends StatefulWidget {
const TyperAnimatedTextPage({Key? key}) : super(key: key);
@override
State<TyperAnimatedTextPage> createState() => _TyperAnimatedTextPageState();
}
class _TyperAnimatedTextPageState extends State<TyperAnimatedTextPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(
width: 20.0,
height: 100.0,
),
DefaultTextStyle(
style: GoogleFonts.aclonica(
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
child: AnimatedTextKit(
animatedTexts: [
// the following text takes the default text style
TyperAnimatedText('Beginning Flutter with Dart,'),
// for the rest, we mention separate text styles
TyperAnimatedText(
'Better Flutter,',
textStyle: GoogleFonts.cairo(
color: Colors.green,
fontSize: 60.0,
fontWeight: FontWeight.bold,
),
),
TyperAnimatedText(
'State in Flutter',
textStyle: GoogleFonts.mandali(
color: Colors.yellow,
fontSize: 50.0,
fontWeight: FontWeight.bold,
),
),
],
onTap: () {},
pause: const Duration(milliseconds: 1000),
),
),
],
),
],
),
),
);
}
}How typing animation in flutter manages the style
If we look at the above code closely, we get the idea.
We‘ve used the default text style as the parent widget of the animated text kit widget.
Consequently, we can inherit the text style and apply it throughout the list of texts that we have provided.
However, we’ve decided to maintain the default text style only for the first text. Not for all.
However, for the rest we have provided different text styles.
The above screenshots will explain this better.
Do you want to test this code in your local machine?
Well, please visit this branch of the GitHub repository.
Leave a Reply