Flutter中如何仅在前一页面加载完成后跳转至下一页面？

1. 前页面未执行完毕的异步方法在跳转后的行为 #

• 异步任务会继续在后台执行直到完成或抛出异常，但原页面的State对象会被标记为mounted=false。如果异步任务结束后尝试调用setState()更新UI，会直接触发FlutterError，这就是你遇到页面加载异常或崩溃的核心原因。
• 未终止的异步任务（比如网络请求、文件IO）会持续占用系统资源，甚至可能引发后续无关逻辑的异常。

2. 解决方案实现 #

方案一：跳转时取消异步任务，返回时重新加载 #

利用CancelableOperation（需导入async包）或请求库自带的取消机制（如Dio的CancelToken），结合页面生命周期管理异步任务：

1. 声明任务变量

CancelableOperation? _initDataTask;
CancelableOperation? _buttonActionTask;

2. 包装异步任务

@override
void initState() {
  super.initState();
  // 包装初始化异步方法
  _initDataTask = CancelableOperation.fromFuture(
    _fetchInitialData(),
    onCancel: () {
      // 可选：取消时的清理逻辑，比如中断网络连接
    },
  );
}

// 按钮点击触发的异步任务
void _handleButtonTap() {
  // 先取消之前未完成的按钮任务
  _buttonActionTask?.cancel();
  _buttonActionTask = CancelableOperation.fromFuture(_fetchButtonData());
}

3. 跳转前后处理任务

void _navigateToNextPage() async {
  // 取消所有未完成的异步任务
  _initDataTask?.cancel();
  _buttonActionTask?.cancel();
  // 跳转页面
  await Navigator.push(context, MaterialPageRoute(builder: (_) => NextPage()));
  // 返回后重新执行初始化任务
  _initDataTask = CancelableOperation.fromFuture(_fetchInitialData());
}

4. 页面销毁时兜底取消

@override
void dispose() {
  _initDataTask?.cancel();
  _buttonActionTask?.cancel();
  super.dispose();
}

方案二：等待页面完全加载后再跳转 #

通过监听页面渲染状态，确保初始化任务和页面渲染都完成后才允许跳转：

1. 标记加载状态

bool _isPageFullyLoaded = false;

2. 完成初始化与渲染监听

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

Future<void> _completePageLoading() async {
  // 执行初始化异步任务
  await _fetchInitialData();
  // 等待页面首次渲染完成
  WidgetBinding.instance.addPostFrameCallback((_) {
    setState(() {
      _isPageFullyLoaded = true;
    });
  });
}

3. 控制跳转逻辑

void _handleButtonTap() async {
  if (!_isPageFullyLoaded) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("页面加载中，请稍候")),
    );
    return;
  }
  // 先执行按钮触发的API请求
  await _fetchButtonData();
  // 跳转页面
  Navigator.push(context, MaterialPageRoute(builder: (_) => NextPage()));
}

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