Flutter OTP验证页切换倒计时组件报setState called during build错误

错误根因 #

• 第二次点击重发按钮触发页面重绘、创建CountdownTimer组件时，你传入的endTime仍是上一次倒计时的过期时间
• 组件检测到目标时间已过期，会在build阶段同步触发onEnd回调
• 回调内直接执行setState更新状态，违反了Flutter「build过程中禁止调用setState触发重绘」的规则，直接抛出异常

修复步骤 #

1. 点击重发按钮时更新endTime为最新的倒计时结束时间，避免组件刚创建就检测到超时
   修改重发按钮的onPressed逻辑：

onPressed: () {
  // userService.resendOtp(widget.phoneNumber.toString()).then((value) => snackBar(value));
  setState(() {
    // 示例为60秒倒计时，按你的实际需求调整时长
    endTime = DateTime.now().millisecondsSinceEpoch + 60 * 1000;
    showCountdown = true;
    clicked++;
  });
},

2. 对onEnd回调做异步处理，等当前帧渲染完成后再更新状态，规避build阶段调用setState的风险：

onEnd: () {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // 增加mounted判断，避免页面销毁后调用setState引发内存泄漏
    if (mounted) {
      setState(() {
        showCountdown = false;
      });
    }
  });
},

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