其他 - 如何在Flutter中创建滑入和滑出动画？

我正在尝试在Flutter中创建一个滑入和滑出动画。动画应如下所示：

----- Widget slides in ---> Wait for 1 seconds -----Widget slides out of screen -->

我尝试了以下代码，但动画陷入了循环。

class _MyStatefulWidgetState extends State<MyStatefulWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _positionAnimation;
  Animation<double> opacityAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    _positionAnimation = Tween<Offset>(
      begin: const Offset(-1, 0),
      end: const Offset(0, 0.0),
    ).animate(
      CurvedAnimation(
          parent: _controller,
          curve: Curves.elasticOut),
    )..addStatusListener((status) {
        print('animation 1 status $status');
        if (status == AnimationStatus.completed) {
          _controller.reset();
        }
        if (status == AnimationStatus.dismissed) {
          _positionAnimation = Tween<Offset>(
            begin: const Offset(0, 0),
            end: const Offset(1, 0.0),
          ).animate(
            CurvedAnimation(
                parent: _controller,
                curve: Curves.elasticIn),
          )..addStatusListener((status2) {
              print('animation 2 status $status2');
            if (status == AnimationStatus.dismissed) {
              _controller.reset();
            }
            });
          _controller.forward();
        }
      });
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: _controller,
    );
  }

  Widget _buildAnimation(BuildContext context, Widget child) {
    return Opacity(
      opacity: 1,
      child: SlideTransition(
        position: _positionAnimation,
        child: Container(
          color: Colors.blueAccent,
          height: 100,
          child: Center(
            child: Text(
              'Hello, World!',
              style: Theme.of(context).textTheme.display1,
            ),
          ),
        ),
      ),
    );
  }

通过这种方法，动画陷入了循环。

我尝试为同一属性设置动画时，不能使用交错动画。（或者是否可以在同一属性上使用交错动画？）。有什么更好的方法来实现呢？

查看更多