Flutter 在扑动中的卡的堆栈视图中设置前卡到后卡的动画

我有一叠卡片和滚轮。我正在尝试设置前卡的动画，将其移到右侧，然后以一种回到卡背面的方式将其移回。 我使用了一个future函数来指定应该首先完成代码的哪一部分。但我得到的是；它会在动画发生时首先更改卡的索引。这是我的密码：

class AnimationsPractice extends StatefulWidget {
  static const String id = 'test_screen';

  @override
  _AnimationsPracticeState createState() => _AnimationsPracticeState();
}

class _AnimationsPracticeState extends State<AnimationsPractice>
    with SingleTickerProviderStateMixin {
  FixedExtentScrollController _scrollController =
      FixedExtentScrollController(initialItem: 0);
  AnimationController _controller;
  Animation<Offset> _offsetAnimation;
  int selected;
  List<Widget> sampleCard;
  Animation<Offset> _offsetAnimation2;
  bool halfWayAnimation;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: const Duration(seconds: 1), vsync: this)
          ..repeat();
    _offsetAnimation = Tween<Offset>(
      begin: Offset.zero,
      end: const Offset(1.5, 0.0),
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.0,
          0.5,
          curve: Curves.elasticIn,
        ),
      ),
    );
    _offsetAnimation2 = Tween<Offset>(
      begin: const Offset(1.5, 0.0),
      end: Offset.zero,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.5,
          1.0,
          curve: Curves.elasticIn,
        ),
      ),
    );
    halfWayAnimation = false;
    _controller.stop();

    sampleCard = [
      Container(
        height: 60,
        width: 40,
        color: Colors.red,
      ),
      Transform.rotate(
          angle: 10 * (pi / 180),
          child: Container(
            height: 60,
            width: 40,
            color: Colors.blueGrey,
          )),
      SlideTransition(
        position: halfWayAnimation ? _offsetAnimation2 : _offsetAnimation,
        child: Container(
          height: 60,
          width: 40,
          color: Colors.yellow,
        ),
      ),
    ];
  }

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

  Future<void> _playAnimation() async {
    try {
      await _controller.forward().orCancel;
      await siftingIndex();
      await _controller.reverse().orCancel;
    } on TickerCanceled {
      // the animation got canceled, probably because it was disposed of
    }
  }

  Future<void> siftingIndex() {
    return Future.delayed(const Duration(microseconds: 200), () {
      sampleCard.insert(0, sampleCard[sampleCard.length - 1]);
      sampleCard.removeLast();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(180.0),
        child: SafeArea(
          child: TextButton(
            child: Text('back to login'),
            onPressed: () {
              Navigator.pushNamed(context, LoginScreen.id);
            },
          ),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Stack(children: sampleCard),
          CustomScrollWheel(
            onItemChange: (x) {
              setState(() {
                _playAnimation();
                halfWayAnimation = true;
              });
            },
            scrollController: _scrollController,
          ),
        ],
      ),
    );
  }
}

class AnimationPractice扩展了StatefulWidget{
静态常量字符串id='test_screen'；
@凌驾
_AnimationsPracticeState createState（）=>\u AnimationsPracticeState（）；
}
class\u animationPracticeState扩展状态
您是否有gif、视频或图像来更好地理解您试图实现的目标？我试图从代码中添加gif。我希望黄牌（前牌）在右边动画，然后回到左边，但作为最后一张牌（我希望它在后面动画），我也尝试使用2个控制器使其工作，每个控制器在我单独测试它们时都能工作，但不知道如何使它们一个接一个地工作！