Flutter gives us plenty of opportunities to animate text. However, color fill animation acts in a different way.
With the help of the animated text kit package, we have added the fade transition effect, or, we can rotate the text.
Basically, it helps us to fill a text with different colors.
For example, we have a text with purple color. But we want to fill it with yellow.
In addition, we want to apply the change in a given duration.
The animated text kit package helps us to accomplish this task in a few lines of code.
Certainly, it’s a great advantage. Why? Because it can make things happen either by the Implicit or by the Explicit Animation.
Our previous discussions had dealt with this topic. Yet a little recapitulation will not probably hurt us.
As flutter comes with implicit animation, it animates text or a container faster than the explicit animation.
It’s also easier to deal with.
But, we have to write a long code to get that effect.
It takes a lot of effort. Therefore we can avoid that.
We can use the animated text kit package to get the color fill animation effect.
Implicit Animation and color fill animation
In other words, we can try to get the color fill animation effect by the AnimatedDefaultTextStyle which is the Animated version of the DefaultTextStyle.
Moreover, just like our color fill animation in flutter we can control the duration.
But it takes more time.
Above all, we have to waste a lot of effort to make it happen.
On the other hand, we can deal with the same color fill animation in an easy manner.
Let’s see how it works first.
Next, we will discuss the code which even a flutter beginner will understand.
Now we have an idea how the color fill animation in flutter works.
How color fill animation in Flutter works
Let us take a look at the code.
After that we will discuss the code. However, our job starts by adding the dependency first.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
animated_text_kit: ^4.2.1
google_fonts: ^2.3.2Having added the animated text kit and the Google font package will make things much easier.
Firstly, now we can use any animation class from the animated text kit package.
Secondly, we can style the animated text with the Google font package.
Now we can see the full code.
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:google_fonts/google_fonts.dart';
/// experimenting with liquid fill animation text
///
class TextLiquidiFillPage extends StatelessWidget {
const TextLiquidiFillPage({Key? key}) : super(key: key);
@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: 50.0,
height: 100.0,
),
TextLiquidFill(
text: 'LIQUIDY',
waveColor: Colors.yellow,
boxBackgroundColor: Colors.deepPurple,
textStyle: GoogleFonts.laila(
fontSize: 70.0,
fontWeight: FontWeight.bold,
),
boxHeight: 250,
boxWidth: 350,
loadDuration: const Duration(seconds: 10),
waveDuration: const Duration(seconds: 6),
),
],
),
],
),
),
);
}
}The code explains itself.
Let’s see how it works.
The “TestLiquidFill” class constructor passes many parameters as we have expected.
We have to pass a text to the class. But we can also add styling to the text by Google font package.
Most importantly, we must provide a background color and wave color.
Furthermore, we can create a container by supplying the width and height properties.
In fact, that container has got the background color. In our case, it is purple.
If you want to test the code, please clone this branch of the GitHub repository.
Leave a Reply