Flutter如何实现延迟注册？未登录可访问部分页面

核心需求实现要点 #

• 未登录用户可访问首页、商城等公开页面
• 底部导航栏根据登录状态动态切换：登录时显示「个人中心」，未登录时显示「登录」
• 个人中心页面需登录验证，未登录访问自动跳转登录页

1. 修复「实例成员无法在初始化器中访问」错误 #

错误原因是类成员初始化阶段无法访问实例变量（如loginState），需将底部导航栏的菜单项构建逻辑移至build方法内：

class BottomNavBar extends StatelessWidget {
  final LoginState loginState;

  const BottomNavBar({super.key, required this.loginState});

  @override
  Widget build(BuildContext context) {
    // 动态生成导航项，build阶段可正常访问loginState
    final navItems = [
      const BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: '首页',
      ),
      const BottomNavigationBarItem(
        icon: Icon(Icons.shop),
        label: '商城',
      ),
      loginState.isLoggedIn
          ? const BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: '个人中心',
            )
          : const BottomNavigationBarItem(
              icon: Icon(Icons.login),
              label: '登录',
            ),
    ];

    return BottomNavigationBar(
      items: navItems,
      currentIndex: _getCurrentTabIndex(context),
      onTap: (index) => _handleTabTap(index, context),
    );
  }

  // 根据当前路由判断选中的tab
  int _getCurrentTabIndex(BuildContext context) {
    final location = GoRouter.of(context).location;
    if (location == '/profile' || location == '/login') return 2;
    if (location == '/shop') return 1;
    return 0;
  }

  // 处理tab点击跳转逻辑
  void _handleTabTap(int index, BuildContext context) {
    switch (index) {
      case 0:
        context.go('/');
        break;
      case 1:
        context.go('/shop');
        break;
      case 2:
        loginState.isLoggedIn ? context.go('/profile') : context.go('/login');
        break;
    }
  }
}

2. 登录状态管理（LoginState） #

使用ChangeNotifier实现状态监听，确保路由和导航栏能实时响应登录状态变化：

class LoginState extends ChangeNotifier {
  bool _isLoggedIn = false;
  bool get isLoggedIn => _isLoggedIn;

  // 模拟登录操作
  void login() {
    _isLoggedIn = true;
    notifyListeners();
  }

  // 模拟退出登录操作
  void logout() {
    _isLoggedIn = false;
    notifyListeners();
  }
}

3. GoRouter 路由配置 #

通过refreshListenable监听登录状态，结合路由守卫实现页面访问控制：

// 全局实例化登录状态
final loginState = LoginState();

final appRouter = GoRouter(
  // 监听登录状态变化，自动刷新路由
  refreshListenable: loginState,
  initialLocation: '/',
  routes: [
    // 公开页面：首页
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    // 公开页面：商城
    GoRoute(
      path: '/shop',
      builder: (context, state) => const ShopPage(),
    ),
    // 登录页面
    GoRoute(
      path: '/login',
      builder: (context, state) => LoginPage(loginState: loginState),
    ),
    // 需登录验证的个人中心页面
    GoRoute(
      path: '/profile',
      builder: (context, state) => const ProfilePage(),
      // 路由守卫：未登录时自动跳转登录页
      redirect: (context, state) {
        return loginState.isLoggedIn ? null : '/login';
      },
    ),
  ],
);

4. 全局状态注入与应用入口 #

将LoginState通过ChangeNotifierProvider注入全局，确保所有页面可访问状态：

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: loginState,
      child: MaterialApp.router(
        routerConfig: appRouter,
        title: '延迟注册Demo',
      ),
    );
  }
}

5. 登录/退出页面示例 #

登录页触发状态切换：

class LoginPage extends StatelessWidget {
  final LoginState loginState;

  const LoginPage({super.key, required this.loginState});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            loginState.login();
            context.go('/profile'); // 登录后跳转个人中心
          },
          child: const Text('模拟登录'),
        ),
      ),
    );
  }
}

个人中心页触发退出：

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

  @override
  Widget build(BuildContext context) {
    final loginState = Provider.of<LoginState>(context);
    return Scaffold(
      appBar: AppBar(title: const Text('个人中心')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            loginState.logout();
            context.go('/'); // 退出后跳转首页
          },
          child: const Text('退出登录'),
        ),
      ),
    );
  }
}

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