Flutter登出异常：命名路由多页面下无法清空页面栈跳转登录页

问题原因 #

现有代码仅执行了Firebase登出操作，但未处理路由栈。当通过命名路由打开多个页面后，路由栈中存在多个页面实例，登出后当前页面仍保留在栈顶，只有手动返回时才会逐步弹出页面并最终显示登录页。

解决方案 #

修改logOut方法，在完成Firebase登出后，通过导航API清空所有历史路由并直接跳转到登录注册页面，具体有两种实现方式：

方式一：直接使用页面组件跳转

如果你的登录注册页是具体的Widget（比如LoginSignupPage），可以用pushAndRemoveUntil方法：

void logOut(BuildContext context) {
  FirebaseAuth.instance.signOut();
  // 跳转到登录页，同时移除所有之前的路由
  Navigator.pushAndRemoveUntil(
    context,
    MaterialPageRoute(builder: (context) => const LoginSignupPage()),
    (Route<dynamic> route) => false, // 条件为false表示移除所有路由
  );
}

方式二：使用命名路由跳转

如果项目采用命名路由管理（比如登录页路由名为/login），可以用pushNamedAndRemoveUntil方法：

void logOut(BuildContext context) {
  FirebaseAuth.instance.signOut();
  Navigator.pushNamedAndRemoveUntil(
    context,
    '/login',
    (Route<dynamic> route) => false,
  );
}

全局调用场景（无需context）

如果需要在没有BuildContext的地方调用登出功能（比如全局工具类），可以通过GlobalKey获取导航上下文：

1. 全局定义导航Key：

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

2. 在MaterialApp中配置该Key：

MaterialApp(
  navigatorKey: navigatorKey,
  initialRoute: '/home',
  routes: {
    '/login': (context) => const LoginSignupPage(),
    '/home': (context) => const HomePage(),
    // 其他路由配置
  },
);

3. 修改logOut方法：

void logOut() {
  FirebaseAuth.instance.signOut();
  navigatorKey.currentState?.pushNamedAndRemoveUntil(
    '/login',
    (Route<dynamic> route) => false,
  );
}

效果说明 #

修改后，点击登出按钮会立即执行Firebase登出，同时清空所有历史页面栈，直接显示登录注册页面，且无法通过返回按钮回到之前的页面，完全符合预期需求。

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