How can i reverse the animation using SizeTransition

Question

i have this code . my animation comse from top to bottom , but How can i reverse it to other side which from bottom to top ..

as we can see it be hidden on the top then it move to down but i need to reverse it to be hidden on the bottom and it move to top

  class VariableSizeContainerExample extends StatefulWidget {
      VariableSizeContainerExample();
    
      @override
      _VariableSizeContainerExampleState createState() => _VariableSizeContainerExampleState();
    }
    
    class _VariableSizeContainerExampleState extends State<VariableSizeContainerExample> with TickerProviderStateMixin {
      AnimationController _controller;
      Animation<double> _animation;
    
      @override
      void initState() {
        super.initState();
        _controller = AnimationController(
          duration: const Duration(seconds: 1),
          vsync: this,
        );
        _animation = CurvedAnimation(
          parent: _controller,
          curve: Curves.fastLinearToSlowEaseIn,
        );
      }
    
      _toggleContainer() {
        print(_animation.status);
        if (_animation.status != AnimationStatus.completed) {
          _controller.forward();
        } else {
          _controller.animateBack(0, duration: Duration(seconds: 1));
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: SafeArea(
              child: Column(
                children: [
                  TextButton(
                    onPressed: () => _toggleContainer(),
                    child: Text("Toggle container visibility"),
                  ),
                  SizeTransition(
                    sizeFactor: _animation,
                    axis: Axis.vertical,
                    child: Container(
                      child: Text(
                        "This can have variable size",
                        style: TextStyle(fontSize: 40),
                      ),
                    ),
                  ),
                  Text("This is below the above container"),
                ],
              ),
            ),
          ),
        );
      }
    }

Answer 1

The default animation start from center then will expand.

To control this, you can use axisAlignment on SizeTransition.

A value of 1.0 indicates the bottom or end, depending upon the [axis].
A value of 0.0 (the default) indicates the center for either [axis] value.

To fixed-bottom(hide-top) use axisAlignment:1 and to fixed top(hide-bottom) axisAlignment:-1

SizeTransition(
  sizeFactor: _animation,
  axisAlignment: -1, //play with 1 and -1

More about SizeTransition.

test widget

void main(List<String> args) =>
    runApp(MaterialApp(home: Scaffold(body: VariableSizeContainerExample())));

class VariableSizeContainerExample extends StatefulWidget {
  VariableSizeContainerExample({Key? key}) : super(key: key);

  @override
  State<VariableSizeContainerExample> createState() =>
      _VariableSizeContainerExampleState();
}

class _VariableSizeContainerExampleState
    extends State<VariableSizeContainerExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 4),
      vsync: this,
    )..addListener(() {
        setState(() {});
      });
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.fastLinearToSlowEaseIn,
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  void _toggleContainer() {
    debugPrint(_animation.status.toString());
    if (_animation.status != AnimationStatus.completed) {
      _controller.forward();
    } else {
      _controller.animateBack(0, duration: Duration(seconds: 1));
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          TextButton(
            onPressed: () => _toggleContainer(),
            child: Text("Toggle container visibility"),
          ),
          SizeTransition(
            sizeFactor: _animation,
            axisAlignment: 1,

            /// also try -1
            axis: Axis.vertical,
            child: Container(
              child: const Text(
                "This can have variable size",
                style: TextStyle(fontSize: 66),
              ),
            ),
          ),
        const  Text("This is below the above container"),
        ],
      ),
    );
  }
}