How to Animate button size and position in Flutter

In the last tutorial, I show the way of adding a nice show and hide animation to the button. In this article, I am gone an add some improvement to that animation.

If you didn’t check my first article read it first

In here I will improve that by adding nice animation to change the button scale while the position animation happening.

For that, we need to create another Animation object and It also a Tween animation. Because of changing the scale in this animation I will change the value from 0 to 1 in here.

After that, you can wrap the FloatingActionButton widget with Transform.scale widget to change the size when the value changes from 0 to 1.

In here I use 3 buttons. The button is in the top of the stack change scale from 1 to o when click it and it will show the button which is on below that. While that animation occur the button which is the bottom of the stack will change the position.

The end of the animation the button in the top of the stack get disappear and show the button in the middle.

When you click the button in the middle it reverse the animation and shows the button in the top of the stack.

class _MyHomePageState extends State with SingleTickerProviderStateMixin {
  
  AnimationController animationController;
  Animation animation;
  Animation sizeAnimation;
  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(() {
        
      });
    });
    sizeAnimation = Tween(begin: 0,end: 1).animate(CurvedAnimation(parent: animationController,curve: Curves.fastOutSlowIn))..addListener((){
      setState(() {
        
      });
    });
  }

  @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: Transform.scale(
                    scale: sizeAnimation.value,
                    child: FloatingActionButton(
                    backgroundColor: Colors.redAccent,
                    onPressed: (){},
                    child: Icon(Icons.cake)),
                ),
              ),
              Positioned(
                bottom: 0,
                
                child: Transform.scale(
                  scale: sizeAnimation.value,
                    child: FloatingActionButton(
                    backgroundColor: Colors.green,
                    onPressed: (){
                      animationController.reverse();
                    },
                    child: Icon(Icons.close)),
                ),
              ),
              Positioned(
                bottom: 0,
                child: Transform.scale(
                  scale: sizeAnimation.value - 1,
                   child: FloatingActionButton(
                    onPressed: (){
                      animationController.forward();
                    
                    },
                    child: Icon(Icons.add)),
                ),
              )
            ],
          ),
        ),
      )
    );
  }
}