如何使用连接到 Firebase Firestore 的 Flutter 管理导航路线表

Question

I wonder how to manage screen navigation when your app is connected to Firebase. When my app was offline I used a routes table, but Im not sure how to do now. Could I do as I show with my code below; use a streambuilder that switches between the AuthScreen when logged out and HomeScreen when logged in, and a routes table to switch with the following screens also when signed in.

I tried this approach but when im signing out from another screen than the HomeScreen the user stays signed in.

How can I set up my routes so that the user always signs out independent from which screen the user's currently on.

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'FlutterApp',
        theme: ThemeData(
          primarySwatch: Colors.orange,
        ),
        home: StreamBuilder(
            stream: FirebaseAuth.instance.authStateChanges(),
            builder: (
              ctx,
              userSnapshot,
            ) {
              if (userSnapshot.hasData) {
                return HomeScreen();
              }
              return AuthScreen();
            }),
        routes: {
          Screen1.routeName: (ctx) => Screen1(),
          Screen2.routeName: (ctx) => Screen2(),
          Screen3.routeName: (ctx) => Screen3(),
          Screen4.routeName: (ctx) => Screen4(),
        });
  }
}

Answer 1

I don't think you're going about this the right way.

They are various ways of doing this. Here's mine.

Firstly, I think you should define an initial route that checks if the user is signed in.

 Widget build(BuildContext context) {
    return MaterialApp(
        title: 'FlutterApp',
        theme: ThemeData(
          primarySwatch: Colors.orange,
        ),
        initialRoute:
          FirebaseAuth.instance.currentUser == null ? "/login" : "/home",
        routes: {
          "/home": (ctx) => HomeScreen(),
          "/login": (ctx) => AuthScreen(), 
          Screen1.routeName: (ctx) => Screen1(),
          Screen2.routeName: (ctx) => Screen2(),
          Screen3.routeName: (ctx) => Screen3(),
          Screen4.routeName: (ctx) => Screen4(),
        });
  }

Note: "/home" & "/login" could be whatever you want as long as it's a string.

For logout, you need to replace the current screen with the login page, something like this should do.

Navigator.pushNamedAndRemoveUntil(context, '/login', (route) => false);