Flutter中GoRouter+Riverpod处理系统返回时更新导航栏索引

使用GoRouter做导航、Riverpod做状态管理的Flutter应用，点击底部导航栏能正常更新索引，但通过Android/iOS系统返回按钮、返回手势操作时，导航栏索引无法同步更新。

解决方案 #

方案1：直接通过GoRouter当前路由路径同步索引（最简洁） #

无需维护单独的导航栏索引状态，直接根据当前路由路径计算索引，从根源避免状态不同步问题：

修改NavBar代码：

class NavBar extends ConsumerWidget {
  const NavBar({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 实时获取当前路由路径
    final currentLocation = GoRouter.of(context).location;
    
    // 根据路径匹配对应索引
    int navBarIndex = 0;
    if (currentLocation == '/settings') {
      navBarIndex = 1;
    } else if (currentLocation == '/profile') {
      navBarIndex = 2;
    }

    return BottomNavigationBar(
      currentIndex: navBarIndex,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          label: 'Settings',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'Profile',
        ),
      ],
      onTap: (index) {
        // 使用go而非push，避免路由栈中重复添加底部导航页面
        final targetPath = index == 0 
            ? '/' 
            : index == 1 
                ? '/settings' 
                : '/profile';
        context.go(targetPath);
      },
    );
  }
}

方案2：通过GoRouter监听维护索引状态（保留单独状态的场景） #

如果需要保留单独的导航栏索引状态，可在AppRouter中添加路由监听，实时同步索引：

1. 修改AppRouter代码：

part 'app_router.g.dart';

@riverpod
class AppRouter extends _$AppRouter {
  @override
  GoRouter build() {
    final router = GoRouter(
      routes: [
        GoRoute(
          path: '/login',
          builder: (context, state) => const LoginView(),
        ),
        GoRoute(
          path: '/register',
          builder: (context, state) => const RegisterView(),
        ),
        GoRoute(
          path: '/forgot-password',
          builder: (context, state) => const ForgotPasswordView()
        ),
        ShellRoute(
          builder: (context, state, child) {
            return Scaffold(
              body: child,
              bottomNavigationBar: const NavBar(),
            );
          },
          routes: [
            GoRoute(
              path: '/',
              builder: (context, state) => const HomeView(),
            ),
            GoRoute(
              path: '/settings',
              builder: (context, state) => const SettingsView(),
            ),
            GoRoute(
              path: '/profile',
              builder: (context, state) => const ProfileView(),
            ),
          ],
        ),
      ],
    );

    // 添加路由监听，路径变化时更新索引
    router.addListener(() {
      final indexNotifier = ref.read(navBarIndexNotifierProvider.notifier);
      switch (router.location) {
        case '/':
          indexNotifier.updateIndex(0);
          break;
        case '/settings':
          indexNotifier.updateIndex(1);
          break;
        case '/profile':
          indexNotifier.updateIndex(2);
          break;
      }
    });

    return router;
  }
}

2. 修改NavBar的onTap逻辑，使用go替代push：

onTap: (index) {
  final targetPath = index == 0 
      ? '/' 
      : index == 1 
          ? '/settings' 
          : '/profile';
  context.go(targetPath);
},

关键说明 #

• 之前使用GoRouterObserver的didPop方法失效，是因为该方法获取的是被弹出的路由，而非当前显示的路由，导致索引更新逻辑反向。
• 使用go而非push，是因为底部导航栏切换属于页面切换，而非栈内新增页面，能避免返回时在底部导航页面之间无效跳转，更符合用户习惯。

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