Flutter 为两个文本小部件依次创建幻灯片动画的最佳方法是什么。颤振

[在此处输入图像描述][1]我希望在屏幕加载时，两个不同的文本小部件一个接一个地自动滑入（例如标题和副标题）

看起来很简单

我可以通过编写用于支持SlideTransition的代码轻松实现这种动画效果。然后按照下面的代码片段复制（例如，2个动画控制器、2个动画对象、2个幻灯片过渡小部件）。将两个动画控制器包装在两个稍有不同的时间设置的未来延迟中。然而，这似乎是一个非常低效的方式来完成这个简单的任务

注: 我尝试过使用TweenSequence（它似乎适合于同一对象上的多个动画）来实现这种效果，但失败了

我还使用了一个动画列表来完成这项工作，但是对于2个小部件来说，支持动画列表的额外代码似乎太多了

有谁知道实现这一点的首选方法/不太详细的方法是什么（最好只使用一个animationcontroller）

谢谢

/// setting up the slide transition and duplicating the animcontroller etc to support the slide animation.

class _MenuPageState extends State<MenuPage> with TickerProviderStateMixin {
  late _animControllerSlideIn,
      _animControllerSlideIn2;

  late Animation<Offset> _slideIn, _slideIn2;
 
  @override
  void initState() {

    _animControllerSlideIn = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);

    _slideIn = Tween<Offset>(begin: Offset(1.1, 0), end: Offset(0, 0)).animate(
        CurvedAnimation(parent: _animControllerSlideIn, curve: Curves.easeOut));

    Future.delayed(Duration(milliseconds: 800), () {
      _animControllerSlideIn.forward();
    });

    _animControllerSlideIn2 = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);

    _slideIn2 = Tween<Offset>(begin: Offset(1.1, 0), end: Offset(0, 0)).animate(
        CurvedAnimation(
            parent: _animControllerSlideIn2, curve: Curves.easeOut));

    Future.delayed(Duration(milliseconds: 1200), () {
      _animControllerSlideIn2.forward();
    });


/////////



child: Column(
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: [
                                Flexible(
                                  child: SlideTransition(
                                    child: Text('Text 1',),
                                    position: _slideIn,
                                  ),
                                  fit: FlexFit.tight,
                                ),
                                Flexible(
                                  child: SlideTransition(
                                    child: Text(
                                      'Text 2!',),
                                    position: _slideIn2,
                                  ),
                                  fit: FlexFit.tight,
                                ),
                              ],
                            )),


  [1]: https://i.stack.imgur.com/2qlAI.png

///设置幻灯片过渡和复制动画控制器等以支持幻灯片动画。
类_MenuPageState使用TickerProviderStateMixin扩展状态{
晚期动物控制员斯莱丁，
_动物控制素2；
后期动画_slideIn，_sliden2；
@凌驾
void initState（）{
_AnimationControllerSlidein=动画控制器(
持续时间：常量持续时间（毫秒：500），vsync:this；
_slideIn=Tween（开始：偏移（1.1,0），结束：偏移（0,0））。设置动画(
曲线动画（父对象：_animControllerSlideIn，曲线：Curves.easeOut））；
延迟（持续时间（毫秒：800），（）{
_animControllerSlideIn.forward（）；
});
_AnimationControllerSlidein2=动画控制器(
持续时间：常量持续时间（毫秒：500），vsync:this；
_slideIn2=Tween（开始：偏移（1.1,0），结束：偏移（0,0））。设置动画(
曲线化(
父对象：_animControllerSlideIn2，curve:Curves.easeOut））；
延迟（持续时间（毫秒：1200），（）{
_animControllerSlideIn2.forward（）；
});
/////////
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
灵活的(
子：幻灯片转换(
子项：Text（'Text 1'，），
位置：_slideIn，
),
适合：FlexFit.tight，
),
灵活的(
子：幻灯片转换(
子：文本(
“文本2！”，），
位置：_sliden2，
),
适合：FlexFit.tight，
),
],
)),
[1]: https://i.stack.imgur.com/2qlAI.png

另一种方法是为滑动文本创建一个有状态的小部件类，并将间隔传递给该小部件类：

    class SlidingText extends StatefulWidget {
      final String word;
      final int interval;
      final bool isDelay;
      
      SlidingText ({this.word, this.interval, this.isDelay});
      
      @override
      _SlidingTextState createState() => _SlidingTextState();
    }
    
    class _SlidingTextState extends State<SlidingText> with SingleTickerProviderStateMixin {
      late AnimationController _animControllerSlideIn;
      late Animation<Offset> _slideIn;
     
      @override
      void initState() {
        _animControllerSlideIn = AnimationController(
            duration: const Duration(milliseconds: widget.interval), vsync: this);
    
        _slideIn = Tween<Offset>(begin: Offset(1.1, 0), end: Offset(0, 0)).animate(
            CurvedAnimation(parent: _animControllerSlideIn, curve: Curves.easeOut));
    
        if(widget.isDelay){
            Future.delayed(Duration(milliseconds: 800), () {
              _animControllerSlideIn.forward();
            });
        }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
                                    child: Text(widget.word),
                                    position: _slideIn,
                                  );

---

太棒了。是的，这成功了！我还可以在我想在应用程序中实现这个类。请注意，在接受的答案中，对未来的读者来说，这是一个次要的内务处理：1）我将Ticker改回SingleTickerProviderStateMixin，并将其放在状态类中。2）我添加了AnimationController类型。3）应该还有一个花括号在此之前，在底部的小部件构建方法将使它工作。谢谢你的帮助！你是对的！更新！

child: Column(
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: [
                                Flexible(
                                  child: SlidingText('Text 1', 800, true),
                                  fit: FlexFit.tight,
                                ),
                                Flexible(
                                  child: SlidingText('Text 2', 800, true),
                                  fit: FlexFit.tight,
                                ),
                              ],
                            )),