Flutter中Navigator.pop与setState同方法调用的执行顺序问题

问题原因 #

Flutter 中Navigator.pop()是同步调用，但它内部触发的 Navigator 状态更新（移除对话框）会被 Flutter 框架加入微任务队列，等待当前同步代码块执行完毕后，才会在下一帧统一处理所有UI更新（包括组件重建、对话框移除）。

而你代码中的setState和_controller.clear()属于当前同步代码块的一部分，会优先于微任务队列中的 Navigator 更新操作执行，所以视觉上会先看到任务列表更新、输入框清空，之后对话框才会关闭。

解决方案 #

方案1：提前保存输入值（最稳妥）

先把输入框的内容保存到临时变量，再清空控制器、更新状态，最后关闭对话框，完全规避时序依赖问题：

void saveNewTask() {
  // 先保存输入内容，避免清空控制器后丢失数据
  final taskContent = _controller.text;
  // 清空控制器
  _controller.clear();
  // 更新任务列表
  setState(() {
    toDoList.add([taskContent, false]);
  });
  // 关闭对话框
  Navigator.of(context).pop();
}

方案2：延迟操作到对话框关闭后

如果需要严格保证对话框关闭后再执行状态更新，可以使用WidgetsBinding.instance.addPostFrameCallback，让后续操作等待当前帧的UI绘制（包括对话框关闭）完成后再执行：

void saveNewTask() {
  final taskContent = _controller.text;
  Navigator.of(context).pop();
  // 等待当前帧绘制完成后执行后续逻辑
  WidgetsBinding.instance.addPostFrameCallback((_) {
    setState(() {
      toDoList.add([taskContent, false]);
    });
    _controller.clear();
  });
}

补充说明 #

Flutter 的setState只是同步标记组件需要重建，实际的重建操作会被框架调度到下一个帧统一执行。当多个setState（包括 Navigator 内部的）被触发时，框架会合并这些更新请求，在下一帧一次性处理，这就是代码顺序和视觉表现不一致的核心原因。

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