Implement button animation in Flutter

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

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

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

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

Implementation

So let’s dive in to 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. 

 return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 300,
          child: Stack(
            children: [
              Positioned(
                bottom: 0,
                child: FloatingActionButton(
                  backgroundColor: Colors.redAccent,
                  onPressed: (){},
                  child: Icon(Icons.cake)),
              ),
              Positioned(
                bottom: 0,
                
                child: FloatingActionButton(
                  onPressed: (){
                    
                  },
                  child: Icon(Icons.play_arrow)),
              )
            ],
          ),
        ),
      )
    );

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 a animation controller object we need to pass two parameters. First one is Duration and second one is Vsync. For Vsync you need to pass SingleTickerProviderStateMixin as a parameter. For that we need to use specify SingleTickerProviderStateMixin . In here we use “with” keyword because we are use mixing here. Mixing will give the capability to your class from another class without inheriting a class.

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

class _MyHomePageState extends State with SingleTickerProviderStateMixin {
  
  AnimationController animationController;
  Animation animation;
  int currentState = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    animationController = AnimationController(duration: Duration(milliseconds: 500),vsync: this);
    animation = Tween(begin: 0,end: 60).animate(animationController)..addListener((){
      setState(() {
        
      });
    });
  }
}

Next, you need to specify the bottom button position, which is specified as a first button in the Stack. In you will be able to use the current value of the animation as a button bottom position.

Last using the animation controller you can start the animation. In the second button, You can specify whether you want to play animation forward or backwards. Modify the code as mentioned below.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 300,
          child: Stack(
            children: [
              Positioned(
                bottom: animation.value,
                child: FloatingActionButton(
                  backgroundColor: Colors.redAccent,
                  onPressed: (){},
                  child: Icon(Icons.cake)),
              ),
              Positioned(
                bottom: 0,
                
                child: FloatingActionButton(
                  onPressed: (){
                    if(currentState == 0){
                      animationController.forward();
                      currentState = 1;
                    } else{
                      animationController.reverse();
                      currentState = 0;
                    }
                  },
                  child: Icon(Icons.play_arrow)),
              )
            ],
          ),
        ),
      )
    );
  }