I'm trying to bypass the Login page by using a variable for the homepage widget. I check FirebaseAuth to determine if the user is signed in already. Then I set the homepage based on yes or no. But it gives me a blank white screen. Why doesn't this work?

    @override
      Widget build(BuildContext context) {
    
        Widget? home;

    //Check to see if a user is already logged in.
    FirebaseAuth.instance
      .authStateChanges()
      .listen((User? user) {
        if (user == null) {
          home = Signup();
        } else {
          home = const HomePage();
        }
      });

    return MaterialApp(
      navigatorKey: NavigationService.navigatorKey,
      debugShowCheckedModeBanner: false, // turn off debug banner
      title: 'My App',
     
      home: home,
    );
   }
 }

I'm trying to bypass the Login page by using a variable for the homepage widget. I check FirebaseAuth to determine if the user is signed in already. Then I set the homepage based on yes or no. But it gives me a blank white screen. Why doesn't this work?

    @override
      Widget build(BuildContext context) {
    
        Widget? home;

    //Check to see if a user is already logged in.
    FirebaseAuth.instance
      .authStateChanges()
      .listen((User? user) {
        if (user == null) {
          home = Signup();
        } else {
          home = const HomePage();
        }
      });

    return MaterialApp(
      navigatorKey: NavigationService.navigatorKey,
      debugShowCheckedModeBanner: false, // turn off debug banner
      title: 'My App',
     
      home: home,
    );
   }
 }

• flutter
• navigation

• the listening happens asynchronously. Your build function returns before any auth state changes were observed – Ivo Commented Nov 19, 2024 at 10:17

2 Answers 2

Since you have not provided much code to understand the issue.Here is full code to achieve your desired way.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 // Navigator key for managing navigation globally
 final navigatorKey = GlobalKey<NavigatorState>();

 Widget? home;

 void checkLogin() {
   // Check to see if a user is already logged in.
  FirebaseAuth.instance.authStateChanges().listen((User? user) {
    if (user == null) {
      home = Signup();
    } else {
     home = const HomePage();
   }
  setState(() {});
  });
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      debugShowCheckedModeBanner: false, // Turn off debug banner
      title: 'My App',
      home: home ?? LoadingScreen(),
    );
  }
}

class NavigationService {
  static final navigatorKey = GlobalKey<NavigatorState>();
}

// Placeholder for Signup screen
class Signup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Signup'),
      ),
      body: Center(
        child: Text('Signup Screen'),
      ),
    );
  }
}

// Placeholder for Home screen
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: Text('Welcome to the Home Page!'),
      ),
    );
  }
}

// Placeholder for Loading screen
class LoadingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

This is because, build method is not recall for firebaseauth user state changes. I'm not sure whether you use a stateful widget or stateless widget here as it wasn't mentioned.

First of all, putting up a listener inside the build method is not recommended. This can lead to memory problems and unnecessary executions as, build method being called every time when state changes for stateful widgets, if you are using a stateful widget. For stateless widgets, build method will be called only once and your home variable change wont effectively rebuild the widget to display the new value.

I recommend you to read through stateless widget and stateful widget differences and use setState() method to rerender the widget on value changes to get the screen updated.