使用Curves.elasticInOut动画Logo时出现BoxConstraints负最小高度错误求助

错误原因 #

Curves.elasticInOut这类弹性曲线的动画值会短暂超出0-1范围，出现负值。你直接用_animation.value * 100作为SizedBox的height，会导致高度变为负数，触发BoxConstraints has a negative minimum height.的布局约束错误。

解决方案 #

通过Tween约束动画值的范围，确保始终不小于0，同时保留弹性曲线的动画效果：

• 将动画定义为Tween<double>与CurvedAnimation的组合，直接把目标范围设置为0到100，避免后续计算出现负值
• 移除手动乘以100的操作，直接使用动画值作为SizedBox的高度

修改后的代码示例 #

class SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this, duration: const Duration(seconds: 5));
    // 关键修改：用Tween约束值范围在0-100，结合弹性曲线
    _animation = Tween<double>(begin: 0, end: 100).animate(
      CurvedAnimation(parent: _controller, curve: Curves.elasticInOut)
    );

    _controller.forward();

    _animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        startTimer();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            decoration: const BoxDecoration(
              color: Color(0xff0d0d0d),
              gradient: LinearGradient(
                colors: [Color(0xff3F3F3F), Color(0xff2D2D2D)],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter, // 修正原渐变无效的问题
              ),
            ),
          ),
          Center(
            child: SizedBox(
              height: _animation.value, // 直接使用动画值，无需乘100
              child: Image.asset('assets/images/foodie_logo.png'),
            ),
          )
        ],
      ),
    );
  }

  void startTimer() {
    // 你的定时器逻辑
  }
}

额外优化提示 #

• 原代码中LinearGradient的begin和end均为Alignment.topCenter，渐变无法生效，建议改为上下方向让渐变正常显示
• 无需给AnimationController添加setState监听，直接在build中使用动画值即可自动更新；若想优化性能，可改用AnimatedBuilder避免不必要的重绘

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