Flutter应用启动时自动无限动画切换Container背景色

你可以通过以下方式实现无需手动触发的无限颜色切换动画：

完整代码示例 #

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

  @override
  State<AutoColorSwitchContainer> createState() => _AutoColorSwitchContainerState();
}

class _AutoColorSwitchContainerState extends State<AutoColorSwitchContainer> {
  // 定义要循环切换的颜色集合
  final List<Color> _colorList = [
    Colors.blue,
    Colors.red,
    Colors.green,
    Colors.yellow,
    Colors.purple,
  ];
  int _currentColorIndex = 0;

  @override
  void initState() {
    super.initState();
    // 等待Widget首次绘制完成后，启动第一次颜色切换
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _switchColor();
    });
  }

  void _switchColor() {
    setState(() {
      // 循环切换颜色索引，实现无限循环
      _currentColorIndex = (_currentColorIndex + 1) % _colorList.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(seconds: 2),
      curve: Curves.fastOutSlowIn,
      color: _colorList[_currentColorIndex],
      height: 200,
      width: 200,
      // 每次动画结束后自动触发下一次颜色切换
      onEnd: _switchColor,
    );
  }
}

关键说明 #

• 初始触发动画：用WidgetsBinding.instance.addPostFrameCallback在Widget首次渲染完成后调用颜色切换方法，解决你之前代码中没有初始动画触发的问题。
• 无限循环逻辑：通过颜色列表+索引取模运算，实现颜色的循环切换。
• 自动衔接动画：利用AnimatedContainer的onEnd回调，每次动画结束后自动触发下一次颜色切换，形成连贯的无限动画。

内容的提问来源于stack exchange，提问作者MehrdadMP