Flutter – Button Animation | Boing 712
Hi, let’s take a look at what we are going to build at the end of this story. Here is the Gif
Before we start building this animation. Let me share how I started building this. Animation has attracted me from the starting of my career and I was able to do some animation on the web using JavaScripts and Jquery but it was pretty tough to do in Mobile Technology like android and IOS. Then in late 2018 flutter came to my life and everything started to change. Because everything in flutter is so simple to achieve. I started creating UI’s and at the end of the day I feel like below one’s, once the UI is built in flutter
Before starting the story I assume that you know a bit about the stateful and a stateless widget in the flutter because we will be using the stateful widget.
To make this animation we will be using a widget called AnimatedContainer, Animated Size, and one AnimationController which starts the animation on the button click.
What is Animated Container in Flutter?
Animated Container is a class that accepts multiple attributes like height, width, color, duration, curve, child, etc (Learn More about Animated Container). The simple way to define is when anything gets updated like height, width, color, or the position of the widget it will slowly change the old value to the new value as per the given duration in the widget.
In the above code, we can see that height, width, and color values will change depending on the value of the show variable. the show is a variable that will be true on the initial load something like this.
bool show = true;So when the show value is true the height of the container will be 100, the width of the container will be 200 and the color of the container will be red. Now when show value is made false the height of the container will be changed to 200 and the width will be changed to 100 in the same way the color of the container will be changed to blue. Now you might be wondering what is the duration in the above code and how it is useful to the widget.
Well, here is the answer, Now the value of the height is getting changed to 200 which is a new value and the old value is 100. The total amount of time that should be taken to change the old value to the new value is given to the duration attribute of the Animated Container class. So here, In our example, it takes 2 seconds to change the value of height from 100 to 200 and the same for width and color.
Note: I am not going to explain about the curves, You can go ahead and take a look at the Curve Class by clicking here
The left side is the animated container and the right side is the normal container
Building an Animated Button
Let’s create the basic structure of the button by using an animated container class because the size of the button is going to be changed as we click on the button. So here is how the button looks like on the initial stage.
Note: We will be wrapping all our widget with the AnimatedSize is because when the widget is added or removed (hide and show) from the widget tree it should have an animation effect. To get the animation effect we use the AnimatedSize
The above button as four widgets in the row which is the child of the animated container class. There are two Icons and two texts which will be displayed on the state changes of the button.
Widgets in the Row are as follows.
- Send Icon — visible.
- Send Text —visible.
- Done Icon — hidden
- Done Text — hidden
Here is the code snippet which will create the above button structure
In the above code our button is wrapped with the GestureDetector and onTap() is implemented so when the user clicks on the button the animation will be forwarded using the animation controller.
- Hiding Send Text and Moving the send icon Right side and Making Fly
So If you take a look at the above animation you can easily see that we are hiding the text first so how we can do that? well, the famous ternary operator we will be using to show and hide the text and we will wrap the text into the AnimatedSize class. Below is the code snippet which shows and hides the text.
So to hide the text first we need to forward our animation using onTap() of the button and make the show variable to false in the _animationController.addListener() so that it will render the blank container and only the send icon will remain in the row. As soon as we hide the text it will be removed from the widget tree so the container width will be reduced to the content of the container which is only sent icon right now. SO FAR SO GOOD right?😊
Let’s move the icon right side. Excited 😁? So here is the trick you have to just take a look at the above animation and you will get to know that we are just increasing the left padding of the animated container (child of GestureDetector) which makes our icon to move the right side.
In the above code snippet, we can see that when we forward the animation we are changing the value to the 100 from 20 of the Animated container. Isn't it so simple? 😉 Now you can see that some if condition in the code snippet, well this condition are just dividing our animation into the percentage. So in the above code snippet condition says that when over animation is in between 20% to 40% change the padding to the 100 which will make a visual effect like our flight is on the runway 🤗. Along with padding even we are changing the background color of the button and shadow color of the button by changing the value of _color variable.
Let’s Takeoff now. We are in the cockpit and I am your co-pilot and commanding you to take off the flight. Lol I mean let's make our icon to fly ✈✈
So here is the main thing which we want to take care of to make our icon fly.
- Translate —This will move our icon on X-axis and Y-axis.
- Rotate — This will rotate the icon on the given degree in our case its 20-degree rotation
- Scale — This will make icon scale down which will make a visual effect that icon is going far from the button
Now the question comes in here is how do we make these three things happen together?. Well, Flutter gives a transform property in an animated container and using that our task will be done. Here is how we do it.
So you can see we have initialized the x-axis and y-axis to the 0 so that initially over icon stays at the original position. In the same way, we initialize the rotation to the 0 as well which will keep the original degree of the icon and scale is at 1 if we make the scale smaller then 1 then icon get smaller in size and if we make scale value to grater then 1 the icon get bigger in size. Now to make our icon to looks like it is going far from the button we will make our scale value to less than 1.
Similarly when our animation has completed 40% and when it is between 40% to 50% we change the x-axis value to 80 to move it far from the button and we rotate it to 20 degrees and we scale it down in the same way what I mention above. Now when our animation reaches half a way that is 50% and between 50% and 80%, we change the value of the y-axis to make our icon go up which gives us a flying effect.
🎉🎉🎉✨WOW, we did it. Taking off a plane is super easy right? You know why? Because this Boing is made by Flutter 😆.
2. Displaying Done Text and Icon
So initially we have sent variable which is made to false which will hide the Done text and Icon. Now the simple trick is when over animation is at 81% we make that sent variable to true so that will hide or remove the sent icon and display the done text and done icon as well. Here is the code snippet
Putting it all together
If you like it please give me a clap which motivates me and I can bring out the more about flutter 😊😊.
Check out my YouTube Channel here. Follow me on Twitter for more posts and updates.
