Resolving Flutter Exception: 'FlutterError (setState() or markNeedsBuild() called during build.'

Question

I am completing Chapter 12 of the FreeCodeCamp 37 hour Flutter tutorial (timestamp 11:20:59) and I have encountered an Exception that is blocking me from continuing. Can you please assist me in resolving this?

The Error text:

Exception has occurred.
FlutterError (setState() or markNeedsBuild() called during build.
This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was:
  Overlay-[LabeledGlobalKey<OverlayState>#f420f]
The widget which was currently being built when the offending call was made was:
  FutureBuilder<FirebaseApp>)

Error occurs on this line of code Navigator.of(context).push(

That line is a apart of this block of code:

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

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: FutureBuilder(
        future: Firebase.initializeApp(
          options: DefaultFirebaseOptions.currentPlatform,
        ),
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.done:
              final user = FirebaseAuth.instance.currentUser;
              if (user?.emailVerified ?? false) {
                return const Text('Done');
              } else {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => const VerifyEmailView(),
                  ),
                );
              }
              return const Text('Done');
            default:
              return const Text('Loading...');
          }
        },
      ),
    );
  }
}

I expect the code to display the VerifyEmailView class instead, the HomePage class is displayed with the default text of 'Loading...'

Answer 1

You can delay one frame and then push to the next route

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => const VerifyEmailView(),
      ),
    );
  });