Flutter - how to add animation to a Widget so that it slides into the view when a button is pressed?

user_2374769 0
Viewed 451

Let's make a simple example, given a Column(), I have 2 Containers in it, and a button.

Column(
 children: [
   MyButton(
    label: "Expand me"
    onTap: () => setState(() => isOpen = !isOpen) 
   ),
   Container(
    child: Text("Container 1"),
    height: 200
  ),
   if (isOpen)
   Container(
    child: Text("Container 2"),
    height: 150
   )
 ]
)

so basically, if we press the button, the second Container will appear right under the first one, like an expansion panel.

Now I want to add an animation, and I'm having a hard time finding the best fit for my use case, as most solutions look really complex for such a simple task.

The animation is really simple, instead of making the Container 2 appear out of nowhere under the first one, it would be nice if the Container 2 would start behind Container 1, and then slide towards the bottom, until in position.

What is the cleanest way to achieve this in flutter?

flutter animation
1 Answers
 import 'package:flutter/material.dart';
    
    // ignore: must_be_immutable
    class EasyAnimatedOffset extends StatefulWidget {
      EasyAnimatedOffset();
    
      @override
      _EasyAnimatedOffsetState createState() => _EasyAnimatedOffsetState();
    }
    
    class _EasyAnimatedOffsetState extends State<EasyAnimatedOffset>
     
        with SingleTickerProviderStateMixin {
      //Notice the "SingleTickerProviderStateMixin" above
      //Must add "AnimationController"
      late AnimationController _animationController;
    
      @override
      void initState() {
        super.initState();
        _animationController = AnimationController(
          vsync: this,
          //change the animation duration for a slower or faster animation.
          //For example, replacing 1000 with 5000 will give you a 5x slower animation.
          duration: Duration(milliseconds: 1000),
        );
      }
    
      animateForward() {
        _animationController.forward();
        //this controller will move the animation forward
        //you can also create a reverse animation using "_animationController.reverse()"
      }
    
      @override
      void dispose() {
        _animationController.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        //the offset has a x value and y value.
        //changing the y axis value moves the animation vertically
        //changing the x axis value moves the animation horizantaly
        double xAxisValue = 0;
        double yAxisValue = 10;
        return AnimatedBuilder(
            animation: _animationController,
            // child: widget.child,
            builder: (context, child) {
              return Transform.translate(
                  offset: Offset(_animationController.value * xAxisValue,
                      _animationController.value * yAxisValue),
                   //add your button or widget here
                  child: InkWell(

                      onTap: () {
                        animateForward();
                      },
    
                      child: Center(
                        child: Container(
                            height: 100,
                            width: 200,
                            color: Colors.amber,
                            child: Center(
                              child: Text(
                                "Animate Me",
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 20,
                                ),
                              ),
                            )),
                      )));
            });
      }
    }
user_150890120
Related