How can i reverse the animation using SizeTransition

user_16213673 0
Viewed 58

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

enter image description here

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"),
                ],
              ),
            ),
          ),
        );
      }
    }
flutter-animation flutter-layout dart flutter
1 Answers

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"),
        ],
      ),
    );
  }
}
user_101571270
Related