解决Flutter异常：setState()/markNeedsBuild()在构建期间调用

错误原因 #

你遇到的FlutterError核心原因是：在FutureBuilder的builder方法执行（Widget构建阶段）时直接调用了Navigator.of(context).push()。Flutter框架禁止在Widget构建流程中触发导航操作——因为导航会触发页面栈变化，导致框架需要标记Widget重新构建，而此时构建流程已经在进行中，从而引发冲突。

修复方案 #

需要将导航操作延迟到当前Widget帧构建完成后执行，同时优化Firebase初始化逻辑避免重复执行，具体修复如下：

修复后的完整代码 #

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  // 将Firebase初始化Future提取为成员变量，避免每次build重复执行初始化
  final Future<FirebaseApp> _firebaseInit = Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: FutureBuilder(
        future: _firebaseInit,
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.done:
              final user = FirebaseAuth.instance.currentUser;
              if (user?.emailVerified ?? false) {
                return const Text('Done');
              } else {
                // 延迟到当前帧构建完成后执行导航
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => const VerifyEmailView(),
                    ),
                  );
                });
                // 返回空占位Widget，满足builder必须返回Widget的要求
                return const SizedBox.shrink();
              }
            default:
              return const Text('Loading...');
          }
        },
      ),
    );
  }
}

关键优化点说明 #

• 提取初始化Future：原代码中Firebase.initializeApp直接写在FutureBuilder参数里，每次HomePage重建都会重新执行初始化，提取为成员变量可保证初始化只执行一次。
• 延迟导航执行：WidgetsBinding.instance.addPostFrameCallback会在当前Widget树构建完成后触发，此时调用导航不会干扰构建流程，从根源解决错误。
• 占位Widget：builder方法必须返回Widget，因此在触发导航前返回SizedBox.shrink()作为临时空占位，不会影响界面显示（导航会立即替换当前页面）。

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