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.


    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 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.


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 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 backward. 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)),
              )
            ],
          ),
        ),
      )
    );
  }

Check full code here – https://github.com/IshanFx/Flutter-Samples/tree/master/button_animate

Reference

https://flutter.dev/docs/development/ui/animations

https://docs.flutter.io/flutter/widgets/Stack-class.html

Leave a Reply