Flutter: Wavy Liquid Animation for Text
Ending the Dart December with completing the third Flutter library of the month after successfully releasing the other two libraries, ExplodeView and SmoothSort. So, let’s introduce the package of the day TextLiquidFill🌊.
TextLiquidFill is the animation library that will help developers keep their users busy while loading anything on the screen. It creates a wavy liquid that fills the text while something is loading on the screen. In this blog, we will discuss the implementation of this animation library for Flutter.
After completing this blog, you will be able to use such beautiful animation.
So starting with the motivation from this LIQUIDY gif, let’s get started!!
First, create a new package in Android Studio and then go to /lib/textLiquidFill.dart file. In this file, remove all the initial code and start with importing the needed Flutter packages.
Then, we create a class TextLiquidFill which extends the StatefulWidget class. This class defines different parameters that are to be entered by the user. And it calls the createState() method by making the instance of the _TextLiquidFillState class.
Now, we will implement the main class _TextLiquidFillState that builds this animation. First, we will define the variables needed for the animation.
After this, we will initialize the variables of the _TextLiquidFillState class by appropriate values.
Here, I have defined two controllers namely _waveController and _loadController. _waveController is the AnimationController which creates animation for a simple wavy feel to the curve in the horizontal direction. And the other _loadController which makes the wave proceeds in the y-direction according to the percent value of the progress.
Now, we will dive into the widget implementation which gives rise to this animation. In the build method, we will use a simple logic for filling the wave inside the text and then will proceed to the implementation of the creation of the wave. We will use the ShaderMask class by Flutter which just takes the blendMode, shaderCallback and child widget as its parameters.
This ShaderMask creates the child widget and behind the child widget, it gives the mask with proper color from shaderCallback. Here, we will use the Text widget as a child with defined TextStyle and around it creates a background mask with defined color. Then, we will create the wave which will be overlayed by the ShaderMask class and so, the portion which is covered by text is the only place where the wave can be displayed. In this way, the wave is fitted inside the text and animationController making it look like liquid filling up in the text.
Here’s the implementation of the build method:
And after this, we come to the implementation of the last but not the least part of the library i.e. creating a wave.
We will simply use the CustomPaint class to create the wave. I have created the Path object and just made it curvy just looking like a wave shape with appropriate values. And I have repeated its sliding horizontally which makes users fill like a running wave. Look at its implementation:
And with this YES, it’s FINISHED!!!
This animation is being added as a part of the Animated Text Kit library created by Ayush Agarwal.
Want to explore other wonderful text animations with TextLiquidFill?
Visit AnimatedTextKit.
Complete code for LiquidTextFill.
