Flutter Web中StatefulShellRoute浏览器前进后退时侧边栏状态不同步问题

核心问题原因 #

浏览器前进/后退时，StatefulShellRoute 的 navigationShell 内部会自动切换当前分支索引，但分支对应的 GoRoute.builder 不会重新执行，导致你之前在 builder 里更新 Bloc 状态的逻辑无法触发，最终侧边栏选中状态与内容视图不同步。

具体修复方案 #

方式一：监听 NavigationShell 索引变化（推荐） #

在承载侧边栏和 navigationShell 的父组件中，用 ListenableBuilder 监听 navigationShell 的状态变化，每次索引更新时主动同步 Bloc 状态：

class ShellContainer extends StatelessWidget {
  const ShellContainer({super.key, required this.navigationShell});

  final StatefulNavigationShell navigationShell;

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: navigationShell,
      builder: (context, child) {
        // 索引变化时直接更新Bloc状态
        context.read<SidebarBloc>().add(UpdateActiveIndex(navigationShell.currentIndex));
        return Scaffold(
          body: Row(
            children: [
              // 侧边栏组件，基于Bloc状态渲染选中样式
              const Sidebar(),
              Expanded(child: navigationShell),
            ],
          ),
        );
      },
    );
  }
}

方式二：通过 RouteObserver 监听路由栈变化 #

如果你的路由包含多层子路由，可通过路由观察者监听前进/后退事件，再同步索引：

1. 定义全局路由观察者：

final routeObserver = RouteObserver<PageRoute>();

2. 在 MaterialApp 中注册：

MaterialApp.router(
  routerConfig: appRouter,
  navigatorObservers: [routeObserver],
);

3. 在 Shell 组件中订阅路由变化：

class ShellContainer extends StatefulWidget {
  const ShellContainer({super.key, required this.navigationShell});

  final StatefulNavigationShell navigationShell;

  @override
  State<ShellContainer> createState() => _ShellContainerState();
}

class _ShellContainerState extends State<ShellContainer> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context)! as PageRoute);
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPopNext() => _syncSidebarIndex();

  @override
  void didPush() => _syncSidebarIndex();

  void _syncSidebarIndex() {
    context.read<SidebarBloc>().add(UpdateActiveIndex(widget.navigationShell.currentIndex));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          const Sidebar(),
          Expanded(child: widget.navigationShell),
        ],
      ),
    );
  }
}

额外注意 #

• 移除原来在各个 StatefulShellBranch-GoRoute.builder 中更新 Bloc 的代码，避免重复触发状态更新。
• 确保 Bloc 处理 UpdateActiveIndex 事件的逻辑正确，能及时更新状态并通知侧边栏 UI 刷新。

内容的提问来源于stack exchange，提问作者Huy Loc Vu