如何在 Flutter 上对多个 Tweens 进行动画处理？

Question

所以我正在尝试实现与文档中提供的Flutter示例类似的东西

但我不希望它受制于按钮，我希望它自己执行动画，并且不停地执行。

至少我需要一个补间来调整高度、宽度和颜色，但是，我发现自己处于一个困惑的境地，不知道如何为所有这些动画设置动画，我有点做到了，但我知道我缺少动画属性小部件，这是我到目前为止的结果：

它在生成的随机值之间进行跳跃。

这是我的代码：

class AnimatedSquare extends StatefulWidget {
  const AnimatedSquare({super.key});

  @override
  State<AnimatedSquare> createState() => _AnimatedSquareState();
}

class _AnimatedSquareState extends State<AnimatedSquare>
  with SingleTickerProviderStateMixin{

  late final AnimationController controller;
  late Tween<double> containerWidth;
  late Tween<double> containerHeight;
  late Tween<Color> containerColor;
  Random random = Random();

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800)
    )
    ..forward()
    ..addListener(() {
      if(controller.isCompleted) {
        setNewValues();
        controller.forward();
      }
    });
    containerWidth = Tween<double>(
      begin: 250,
      end: random.nextInt(300).toDouble()
    );
    containerHeight = Tween<double>(
      begin: 250,
      end: random.nextInt(300).toDouble()
    );
    containerColor = Tween(
      begin: Colors.red,
      end: Color.fromRGBO(
        random.nextInt(255),
        random.nextInt(255),
        random.nextInt(255), 
        1
      )
    );

    super.initState();
  }

  void setNewValues() {
    containerWidth.begin = containerWidth.end;
    containerHeight.begin = containerHeight.end;
    containerColor.begin = containerColor.end;
    controller.reset();
    containerWidth.end = random.nextInt(300).toDouble();
    containerHeight.end = random.nextInt(300).toDouble();
    containerColor.end = Color.fromRGBO(
      random.nextInt(255),
      random.nextInt(255),
      random.nextInt(255),
      1
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        return Container(
          height: containerHeight.begin,
          width: containerWidth.begin,
          decoration: BoxDecoration(
            color: containerColor.begin
          ),
        );
      },
    );
  }

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

任何人都可以帮我解决这个问题吗？，我在互联网上找不到太多信息，用这个问题作为我最后的资源

Answer 1

AnimatedContainer(
      height: containerHeight.begin,
      width: containerWidth.begin,
      decoration: BoxDecoration(color: containerColor.begin),
      duration: const Duration(seconds: 2),
      curve: Curves.fastOutSlowIn,
    );

使用它作为 AnimatedBuilder 的回报