The cursor plays an important role in animation in flutter. Most importantly when we use the cursor in typing animation.
For example, we have used typing animation in flutter before.
When we animate a text in flutter, we can do it in several ways.
We can add the fade transition effect, or, we can rotate the text.
However, we need to understand one key concept in flutter animation.
Flutter Animation is of two types. The “Implicit Animation”. And the “Explicit Animation”.
Certainly, the implicit animation is easier than the explicit animation. We have discussed both types of animations.
But, as I just said, before using the animation in Flutter we must know a few facts.
We have created a special category only on Animation. Therefore don’t forget to check it.
By the way, Flutter already has a few built-in Animation Widgets for us. Above all, we can always use Implicit animation.
Why?
Because the Implicit Animation refers to built-in Animated Widgets that we can use. Moreover, they are easier than the Explicit Animation.
On the other hand, the animated text kit package has made our life extremely easy.
Animated Text kit and cursor in animation
We can add many effects. And that too, in an easy way.
Let’s see how we can use the cursor in animation in flutter.
The animated text kit package has a special class for it.
Moreover, the steps are simple. As we have shown before.
Even a beginner will understand.
Firstly, what will the cursor look like?
That we can decide.
Secondly, time is important.
Why?
Because the cursor blinks.
As the app types in the text, the cursor moves ahead of the text.
This type of animation makes the cursor blink when the screen displays a series of text one after another.
Image says a thousand words. Therefore we will see the screenshots first.
Let’s see the code now. After that we will discuss how it works.
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:google_fonts/google_fonts.dart';
class TypewriterAnimatedTextPage extends StatefulWidget {
const TypewriterAnimatedTextPage({Key? key}) : super(key: key);
@override
State<TypewriterAnimatedTextPage> createState() =>
_TypewriterAnimatedTextPageState();
}
class _TypewriterAnimatedTextPageState
extends State<TypewriterAnimatedTextPage> {
@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,
color: Colors.yellow,
),
child: AnimatedTextKit(
animatedTexts: [
/// the cursor will be a string
TypewriterAnimatedText('Walk beside me',
cursor: '////\\\\'),
TypewriterAnimatedText('Be my friend', cursor: '||||'),
TypewriterAnimatedText('Life is short',
cursor: '<|><|><|>'),
TypewriterAnimatedText('So many things to do',
cursor: '💡'),
],
onTap: () {},
pause: const Duration(milliseconds: 100),
),
),
],
),
],
),
),
);
}
}In the above code we need the AnimatedTextKit class first.
Next, the “animatedTexts” property expects a list of “TypewriterAnimatedText” classes.
Most importantly, the “TypewriterAnimatedText” class constructor passes two arguments.
One is the text that we want to display.
And the other is the “cursor” parameter which expects a string data type. In short, we can design the cursor here.
Do you want to test the code and run it on your own machine?
Please clone this branch of the GitHub repository.
Leave a Reply