Mobile application development, front end and backend development

Flutter Button Animation

Flutter Button Animation

In here I am gone a show you how to make nice button animation using Flutter animation.

Before getting started there are few things need to know. In here I am using an AnimationController class and Animation to make this animation happen. In the Animation class, we define what is the actual animation which we need to use. In Flutter there are two main animation types

Tween animation – In this type, you have to define the start and end value of the animation. As an example If you need to change the position of the UI widget, you can use this type. In there you can specify the start position and end position. We don’t need to worry about what is happening in between the value changes. The framework will handle that.

Physics-based animation – This a more advanced animation category than the tween. This type of animation can handle how to show the animation in like when we toss a coin.n.

In here I am using a tween animation. Because we only need to change the position of the button when someone clicks it.

AnimationController is responsible the control part of the animation. You will need the AnimationController to start animation, reverse animation, reset animation etc.

Implementation

So let’s dive into the coding part. First, create a new project. In here we need to add a two button which is top of another. For that, you can use Stack widget. Also, I will wrap the Stack widget with a container to get more space.

Next, we need to create an animation object and the animationController object. As I mentioned above we use tween animation here. You can create these object inside the initState method.

When we are creating an animation controller object you need to pass two parameters. First one is Duration and the second one is Vsync.

For Vsync you need to pass SingleTickerProviderStateMixin as a parameter. In here we use “with” keyword because we use mixing here. Mixing will give the capability to your class from another class without inheriting a class.

In here I’m creating a currentState variable to keep the current button statue whether it moved or not.