Dart/Flutter中如何实现按钮异步执行方法后再触发路由跳转

你之前的async写法不生效，核心原因是saveQuestionModel()、loadQuestions()本身是返回Future的异步方法，调用时没有加await关键字，代码不会等待这两个方法执行完毕，会直接往下运行路由跳转逻辑，自然不符合要求。

根据两个前置方法是否有先后执行要求，选对应写法即可：

按顺序执行（两个方法有依赖，比如必须存完才能读） #

onTap: () async {
  // 依次等待两个方法执行完成
  await saveQuestionModel(_key, snapshot.data);
  await loadQuestions(_key);
  // 校验当前组件是否仍挂载，避免context失效报错
  if (!context.mounted) return;
  // 执行路由跳转
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => QuizScreen(
        code: _key,
        index: _currentIndex,
      ),
    ),
  );
},

并行执行（两个方法无依赖，同时执行效率更高） #

如果save和load没有先后顺序要求，用Future.wait同时触发两个方法，等两者都跑完再跳转，耗时更短：

onTap: () async {
  // 并行等待两个异步任务全部完成
  await Future.wait([
    saveQuestionModel(_key, snapshot.data),
    loadQuestions(_key),
  ]);
  if (!context.mounted) return;
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => QuizScreen(
        code: _key,
        index: _currentIndex,
      ),
    ),
  );
},

• 不需要给Navigator.push加await，除非你需要监听跳转页面的返回结果，当前场景只需要在跳转前等待前置任务完成即可
• 异步任务执行完必须校验context.mounted，否则如果用户在任务执行期间关掉了当前页面，会因为上下文失效触发运行时报错

内容的提问来源于stack exchange，提问作者Marco Túlio Barros