Do you want to add sparkle animation in flutter? Certainly there are different ways to do that. But the easiest way to add the sparkle animation effect is the animated text kit package.
When a text sparkles, how does it look?
Let’s take a look first.
After that we will discuss how this sparkle animation works in flutter. Right?
Sparkle has many synonyms. You have probably known them. So I would like to choose only one.
Flicker.
Because in the code, the package has named the class after it. As a result, we get “FlickerAnimatedText”.
In a moment we will see how this class passes a few properties to add such sparkle animation effect in flutter.
We have seen the previous animated text kit samples before.
To name a few they are color fill animation, flutter text effects, scale animation, cursor in animation, or typing animation in flutter.
Before discussing the code in detail, we would like to know a few basic facts about animation.
Implicit, Explicit and Sparkle Animation
In flutter the Animation is of two types. The Implicit and the Explicit.
If speed matters, then the Implicit Animation definitely scores over the explicit one.
Why?
Because flutter comes with it. The implicit means built-in Animated Widgets.
A beginner or intermediate flutter developer will easily understand how the implicit animation works.
Because flutter has added the word “Animated” before the widget that will animate. For instance, we can think of one such Implicit Animation. The AnimatedContainer.
We have seen before that the Container Widget in Flutter refers to the Layout Widgets.
As a result, the AnimatedContainer is an Animated version of the Container Widget. When the Container is Animated, it gradually changes its values over a period of time.
Although in case of the “FlickerAnimatedText” the sparkle animation flickers the Text widget.
Let’s see how it works.
Firstly we need to add the dependency.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
animated_text_kit: ^4.2.1
google_fonts: ^2.3.2Secondly, we will import the package.
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:google_fonts/google_fonts.dart';As we have decided to use the Google fonts package, we have also imported the package.
By the way, with the help of Google fonts package we can add different style to our text.
Here style really matters.
Why not?
After all, we need animation to make our flutter app look better. Isn’t it?
Therefore, we always try to add some more styling.
In addition, not only in the sparkle animation, but in any type of animation, color and font family play an important role.
How sparkle animation works
Let’s see the full code.
It’s no different from other animated text kit examples.
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:google_fonts/google_fonts.dart';
import 'scale_animated_text_page.dart';
class FlickerAnimatedTextPage extends StatefulWidget {
const FlickerAnimatedTextPage({Key? key}) : super(key: key);
@override
State<FlickerAnimatedTextPage> createState() =>
_FlickerAnimatedTextPageState();
}
class _FlickerAnimatedTextPageState extends State<FlickerAnimatedTextPage> {
@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(
/// adding flicker animation
///
animatedTexts: [
FlickerAnimatedText(
'Flutter',
textStyle: GoogleFonts.cairo(
color: Colors.green,
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
),
FlickerAnimatedText(
'Is Beautiful',
textStyle: GoogleFonts.mandali(
color: Colors.amber[600],
fontSize: 50.0,
fontWeight: FontWeight.bold,
),
),
FlickerAnimatedText(
'Isn\'t it?',
textStyle: const TextStyle(
fontSize: 60.0,
fontWeight: FontWeight.bold,
color: Colors.redAccent,
),
),
],
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ScaleAnimatedTextPage(),
),
);
},
pause: const Duration(milliseconds: 100),
),
),
],
),
],
),
),
);
}
}Firstly we need a “AnimatedTextKit” class that will pass a few parameters. These properties will expect some real arguments.
As a result, we will provide them to get the desired sparkle animation effect.
The “animatedTexts” property expects a list of widgets.
As it expects, we will pass a series of “FlickerAnimatedtext” classes.
The constructor requires a text. And in addition we can add a text style widget.
As we see, there are many advantages.
We don’t have to build the animation from scratch. Moreover, we don’t have to choose between implicit and explicit.
Right?
We have added the dependency. After that we imported the package.
And voila! The text starts sparkling.
Leave a Reply