Flutter Animate the Button Size with Position

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)),
                ),
              )
            ],
          ),
        ),
      )
    );
  }
}
Don’t forget to subscribe to my channel 🤗

Reference

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

This Post Has 4 Comments

  1. I really love your site.. Pleasant colors & theme. Did you create this
    amazing site yourself? Please reply back as I’m trying to create my own personal site and would love to know where you got this from or exactly what the
    theme is named.

  2. Why users still make use of to read news papers when in this technological world everything is available on web?

  3. I like the helpful information you provide in your articles.
    I’ll bookmark your weblog and check again here frequently.
    I’m quite certain I’ll learn many new stuff right here!
    Best of luck for the next!

  4. I’m really impressed together with your writing talents and also
    with the layout for your blog. Is this a paid topic or did you modify it your self?
    Either way keep up the excellent quality writing, it
    is uncommon to look a nice weblog like this one these days..

Leave a Reply