Flutter中实现Container每2秒周期性颜色切换动画的最简方法

嘿，这个需求在Flutter里实现起来特别省心！我最推荐的方案是用AnimatedContainer配合简单的状态管理，不用写复杂的动画控制器，几行代码就能搞定👇

核心思路 #

我们只需要维护一个标记当前颜色状态的布尔变量，每2秒切换这个变量的取值，AnimatedContainer会自动根据变量变化，在两种颜色之间生成平滑的过渡动画。

完整代码示例 #

import 'dart:async';
import 'package:flutter/material.dart';

void main() => runApp(const ColorSwitchApp());

class ColorSwitchApp extends StatelessWidget {
  const ColorSwitchApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: ColorSwitchContainer()),
      ),
    );
  }
}

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

  @override
  State<ColorSwitchContainer> createState() => _ColorSwitchContainerState();
}

class _ColorSwitchContainerState extends State<ColorSwitchContainer> {
  bool _isBlue = true;
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    // 每2秒切换一次颜色状态
    _timer = Timer.periodic(const Duration(seconds: 2), (timer) {
      setState(() {
        _isBlue = !_isBlue;
      });
    });
  }

  @override
  void dispose() {
    // 记得销毁定时器，避免内存泄漏
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      width: 200,
      height: 200,
      // 根据状态切换颜色
      color: _isBlue ? Colors.blue : Colors.blueGrey,
      // 动画时长设为2秒，和切换周期匹配，实现无缝循环
      duration: const Duration(seconds: 2),
      // 可选：添加动画曲线让过渡更自然
      curve: Curves.easeInOut,
    );
  }
}

关键细节说明 #

• AnimatedContainer：这是Flutter提供的“懒人友好”动画组件，只要它的可动画属性（比如color、size等）发生变化，就会自动生成过渡动画，省去了手动创建AnimationController和Tween的麻烦。
• Timer.periodic：用来定时触发状态更新，每2秒翻转一次_isBlue变量，通过setState通知Flutter重建UI，触发颜色过渡。
• 资源清理：在dispose方法里销毁定时器，这是个好习惯，能避免页面销毁后定时器继续运行导致的内存泄漏问题。
• 自定义动画曲线：如果觉得默认的过渡效果太生硬，可以通过curve参数设置不同的动画曲线，比如Curves.bounceInOut能让过渡带点弹性效果。

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