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. Well, Flutter gives a transform property in an animated container and using that our task will be done. Now the question comes in here is how do we make these three things happen together?. Scale - This will make icon scale down which will make a visual effect that icon is going far from the button.Rotate - This will rotate the icon on the given degree in our case its 20-degree rotation.Translate -This will move our icon on X-axis and Y-axis.So here is the main thing which we want to take care of to make our icon fly. We are in the cockpit and I am your co-pilot and commanding you to take off the flight. 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. 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 🤗. 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. 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. The left side is the animated container and the right side is the normal container 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
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.
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. 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.
Now you might be wondering what is the duration in the above code and how it is useful to the widget. 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. 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. the show is a variable that will be true on the initial load something like this. In the above code, we can see that height, width, and color values will change depending on the value of the show variable.
0 kommentar(er)
