Flutter使用Cubit的loaded状态跳转页面触发两次构建问题求助

核心问题根源 #

你遇到的两次构建、界面闪烁问题，核心原因是在Widget的build方法中执行页面跳转这类副作用操作。build方法是纯函数，仅负责根据当前状态同步返回对应Widget，不应该包含异步操作、导航调用等和UI渲染无关的逻辑。你在build方法中用Timer.run异步执行跳转，同时返回Container，会先触发一次build渲染临时容器，跳转完成后又触发一次页面构建，自然会出现闪烁。

正确实现方案 #

Bloc库官方明确要求，导航、弹框、Toast等副作用操作不能放在BlocBuilder的builder回调中处理，推荐用以下两种方案实现：

方案1：使用BlocListener监听状态执行导航（官方推荐） #

BlocListener不会触发额外的UI构建，只会在状态变化时执行指定回调，完全不会干扰正常的build流程，示例代码如下：

@override
Widget build(BuildContext context) {
  return BlocListener<YourCubit, YourState>(
    listener: (context, state) {
      // 仅在状态为提交成功的loaded状态时执行跳转
      if (state is SubmitSuccessState) {
        // 直接执行导航，不需要异步包装
        Navigator.of(context).push(
          MaterialPageRoute(builder: (_) => TargetPage()),
        );
        // 若使用auto_route，直接调用context.pushRoute(TargetRoute())即可
      }
    },
    child: BlocBuilder<YourCubit, YourState>(
      builder: (context, state) {
        // builder回调仅做状态到UI的映射，不处理任何副作用逻辑
        if (state is FormLoadingState) {
          return const CircularProgressIndicator();
        }
        if (state is FormEditingState) {
          return YourFormWidget();
        }
        return const SizedBox.shrink();
      },
    ),
  );
}

方案2：在业务逻辑层直接执行跳转 #

你也可以在Cubit的业务逻辑方法中，拿到可用的BuildContext直接执行跳转，不需要通过状态触发build流程：

// Cubit中的表单提交方法
Future<void> submitForm(FormParams params) async {
  emit(FormLoadingState());
  final res = await submitApi(params);
  if (res.isSuccess && context.mounted) {
    // 提交成功后直接执行跳转，不需要 emit 加载成功状态触发构建
    Navigator.of(context).push(
      MaterialPageRoute(builder: (_) => TargetPage()),
    );
    return;
  }
  emit(FormErrorState(error: res.errorMsg));
}

额外注意事项 #

• 原有的登录后点击输入框页面刷新、无法输入的问题，本质也是build方法中重复执行了副作用逻辑导致，将导航逻辑移出build方法后即可同步解决
• 所有和UI渲染无关的操作，都不要放在BlocBuilder的builder回调中执行

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