Flutter页面初始化时AnimatedContainer动画无法触发问题求助

我来帮你排查下这个问题～你的代码逻辑本身没问题，但核心问题出在initState的执行时机上：

当你在initState里直接调用_animate()时，组件还没有完成首次渲染。此时调用setState修改loginWidth，会导致AnimatedContainer在第一次构建时就直接使用修改后的130.0作为初始宽度，完全跳过了从0.0到130.0的过渡过程，自然看不到动画效果。

解决方案：延迟触发动画，让组件先完成首次渲染 #

最简单的修复方式是用Future.delayed(Duration.zero)把动画触发逻辑放到微任务队列中，等组件完成首次构建后再执行状态变更：

class _MaintenanceState extends State<Maintenance> {
  @override
  void initState() {
    super.initState();
    // 延迟到组件首次渲染完成后再触发动画
    Future.delayed(Duration.zero, () {
      _animate();
    });
  }

  var loginWidth = 0.0;
  Curve _curve = Curves.fastOutSlowIn;

  _animate() {
    setState(() {
      loginWidth = loginWidth == 0.0 ? 130.0 : 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 给AnimatedContainer加上你定义的curve属性，让动画更流畅
        child: AnimatedContainer(
          duration: const Duration(seconds: 1),
          curve: _curve, // 补上之前定义的曲线
          width: loginWidth,
          height: 60.0,
          decoration: BoxDecoration(
            color: Colors.green[600],
            borderRadius: BorderRadius.circular(20.0),
          ),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              children: [
                Text("Add \nProject"),
                Spacer(),
                // 注意：如果图片路径正确，这里可以正常显示
                Image(image: AssetImage("assets/images/add_icon.png")),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

额外优化点 #

• 补上了你定义但未使用的curve属性，让动画过渡更符合预期；
• 给Duration和EdgeInsets加上const修饰，提升性能；
• 确保你的assets/images/add_icon.png已经在pubspec.yaml中正确配置，避免图片加载失败。

这样修改后，AnimatedContainer就能正常从0.0宽度平滑过渡到130.0宽度了～

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