A Simple Animation App in Flutter
This blog explains, How to build a simple animation app in Flutter from very basic in Flutter. We can animate literally everything in the Flutter. By everything, I meant to say every widget. Because in Flutter, everything is Widgets.
One of the ways to build the animations is to change the value let's say the font size dynamically, and repeatedly calling setState in a StatefulWidget.
So let’s start building our animation app.
Source Code:
Step 1: We know that animation is just changing the values dynamically and building the widgets multiple times per second. We will start by building a UI first. This UI will contain the Redhat logo, Flutter logo, and the Firebase Logo. And all of these three components are placed at the center of the Row.
The Transform.translate is applied to the Images. The Transform.translate will change the position of its child with respect to the values of the x-axis and y-axis provided by the Offset. To change the values dynamically, I’m using the variable named padding.
For achieving the animation, we required to add the AnimationController.
To tell the Flutter that there is some animation in this Widget, we have to add the ticker. There are two types of mixin present in the Flutter. One is the SingleTickerProviderStateMixin and another is TickerProviderStateMixin
The SingleTickerProviderStateMixin will take only one AnimationController and TickerProviderStateMixin will take multiple AnimationControllers. As I’m will be using multiple animations on the same screen, I had used TickerProviderStateMixin.
For using the values inside a widget, we need an Animation<double> instance which exposes a value property. AnimationController takes the Duration and generates the values ranging from 0(start) to 1(end) in the specified time span. To start the animation we have to use the forward method provided by the AnimationController.
This code will dynamically update the values of the variable named padding and calls the setState. This code will check for the status of the Animation. And if the animation is completed then it will reverse the AnimationController and this process will keep on going infinite times.
If due to some problem, the animation gets stuck, then it will call the forward method of the AnimationController and will start the animation again.
Now, I want to display a “Welcome to app” text. This text will automatically rotate in a circular path along with scaling its size all the way from small to large continuously.
This text will be placed in a circular container and the color of the container will change continuously.
Transform.scale applied to the “welcome” text will be responsible for increasing and decreasing the size of the text. We just have to change the values of the scale parameter of the Transform.scale dynamically. After that, I will place this Transform widget at the center of the circular container. Now, to rotate this circular container, I will apply Transform.rotate transformation.
The animation implemented below will be responsible for rotating the circular container. As we know Tween is used to set the range of the values. As we have to rotate the circular container in the full circle, we have to express the values ranging from 0 to 2π.
Also, we want to change the color of the container dynamically. For this, we have to write a function that will change the color on every build. Let’s name this function as changeColor.let me tell you the purpose behind using the sleep function. If we run the changeColor function without the sleep function, then it will change the color of the container so fast that our eyes can’t capture it. To make the color-changing noticeable, I had used a sleep function with a duration of 100 milliseconds.
Now, I would like to add animation to the text using the Padding widget. The text on the button will continuously be moving forward repeatedly.Let’s create a button and add some text to it. We will wrap this text up in the Padding widget and apply some animation to the text using the padding property.As we did earlier, similarly, we will create a new AnimationController and implement it in the initState.
We will use the values form the textAnimation and change the values of the padding on every build using the setState.
Final Output:
Finally, we will build the entire project and the combined effect of the animation will look like this.
At last, the animation app is ready. Thanks for reading this article.
For any help or suggestions connect with me on Linkedin.
