Flutter开发定时器出现setState() called during build错误如何解决

核心问题原因 #

你遇到的报错不是因为在initState中调用setState，而是以下几个配置错误导致的：

• super.initState() 调用顺序错误，Flutter要求State的initState方法必须优先执行父类初始化逻辑，再运行自定义代码
• 未校验组件挂载状态就调用setState，定时器触发时可能组件还没完成挂载，或者已经被销毁
• 没有在页面销毁时手动释放定时器，会触发内存泄漏和后续的非法setState调用

修正后的完整代码 #

late double timeRemaining;
late Timer _timer;
bool done = false;

@override
void initState() {
  // 必须优先调用super.initState
  super.initState();
  // 注意：原时间计算逻辑可能存在问题，若endDate晚于startDate，差值会为负数
  // 建议调整为 endDate.difference(DateTime.now()).inSeconds 来获取当前到结束时间的剩余秒数
  timeRemaining = widget.startDate.difference(widget.endDate).inSeconds / 1000 - 80;
  const Duration seconds = Duration(seconds: 1);

  _timer = Timer.periodic(seconds, (timer) {
    // 调用setState前先校验组件是否仍挂载，避免异常
    if (!mounted) {
      timer.cancel();
      return;
    }
    setState(() {
      timeRemaining--;
      if (timeRemaining <= 0) {
        done = true;
        timer.cancel();
        // 此处可添加计时结束后要执行的操作
      }
    });
  });
}

@override
void dispose() {
  // 页面销毁时强制取消定时器，避免内存泄漏
  if (_timer.isActive) {
    _timer.cancel();
  }
  super.dispose();
}

可选优化点 #

原时间计算逻辑中inSeconds / 1000属于冗余计算，Duration.inSeconds返回的就是秒级整数，除以1000会将数值缩小1000倍，导致实际计时时长不符合预期，可根据你的业务需求调整计算逻辑。

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