Flutter中登录态切换时登录页与仪表盘页的正确导航实现

问题根因 #

直接在MaterialApp.home中通过三元判断替换组件的写法，属于组件树的硬替换，完全绕过Navigator路由栈的转场逻辑，因此状态切换时不会有任何导航动画。
同时把LoginPage路由配置在PersistentBottomNavBar的tab item内部，本身和“登录页无底部导航栏”的定位冲突，跳转逻辑存在错位。

适配实现方案 #

1. 路由分层，解耦独立全屏页面
   无底部导航的LoginPage和带底部导航的MainMenu需要做平级划分，全部挂载在MaterialApp的根路由栈上，不要在PersistentBottomNavBar的内部路由里注册登录页。
   参考改造后的main.dart实现：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'My App',
         // 全局配置路由转场动画
         onGenerateRoute: (settings) {
           return PageRouteBuilder(
             settings: settings,
             pageBuilder: (_, animation, __) {
               switch (settings.name) {
                 case LoginPage.routeName:
                   return LoginPage();
                 case MainMenu.routeName:
                   return MainMenu();
                 // 其他页面按原有路由配置注册
               }
             },
             // 300ms淡入淡出转场，适配登录态切换的视觉体验
             transitionsBuilder: (_, animation, __, child) {
               return FadeTransition(
                 opacity: animation,
                 child: child,
               );
             },
             transitionDuration: Duration(milliseconds: 300),
           );
         },
         // builder层做全局登录态监听
         builder: (ctx, child) {
           return Consumer<AuthProvider>(
             builder: (ctx, auth, _) {
               // 下一帧触发路由操作，避免build阶段操作路由的报错
               WidgetsBinding.instance.addPostFrameCallback((_) {
                 final navigator = Navigator.of(ctx);
                 final currentRoute = navigator.currentRoute.settings.name;
                 // 已登录但当前不在主界面时，清空栈跳转主界面
                 if (auth.isLoggued && currentRoute != MainMenu.routeName) {
                   navigator.pushNamedAndRemoveUntil(
                     MainMenu.routeName,
                     (route) => false,
                   );
                 }
                 // 未登录但当前不在登录页时，清空栈跳转登录页
                 if (!auth.isLoggued && currentRoute != LoginPage.routeName) {
                   navigator.pushNamedAndRemoveUntil(
                     LoginPage.routeName,
                     (route) => false,
                   );
                 }
               });
               return child!;
             },
           );
         },
       );
     }
   }
   

2. 修正PersistentBottomNavBar配置
   删除PersistentBottomNavBar首页tab item里routeAndNavigatorSettings中关于LoginPage的注册逻辑：该组件的内部路由栈只需要处理MainMenu下各个tab嵌套的二级子页面，和全局登录/主界面切换逻辑完全解耦。
3. 初始启动逻辑适配
   AuthProvider在应用启动时从本地读取登录状态后，会自动触发builder层的监听逻辑：已登录就跳转至带底部导航的仪表盘页，未登录就跳转至无底部导航的登录页，全程带平滑转场动画，不需要在home里写硬编码的三元判断。

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