Flutter Web路由跳转时如何动态修改浏览器标签页标题

原有写法不生效的核心原因：

• 仅实现了路由路径与标题的匹配逻辑，未在路由切换的正确时机调用官方提供的标题设置接口，浏览器DOM层的title节点不会自动同步自定义逻辑的返回值。
• 全局routePath变量未在路由切换时同步更新，匹配逻辑无法拿到当前生效的路由地址。

方案一：修正原有onGenerateRoute逻辑 #

Flutter官方提供了跨端一致的页面标题设置方法SystemChrome.setApplicationSwitcherDescription，该方法会同时同步浏览器标签标题、系统应用切换器描述，兼容性远好于直接操作document.title。
先引入服务包：

import 'package:flutter/services.dart';

调整onGenerateRoute实现，在路由构建时同步更新路由变量与标签标题：

onGenerateRoute: (RouteSettings settings) {
  // 同步更新当前路由路径
  routePath = settings.name;
  Widget targetPage;

  // 原有路由匹配逻辑
  switch(settings.name) {
    case loginRoute:
      targetPage = const LoginPage();
      break;
    case dashboardRoute:
      targetPage = const DashboardPage();
      break;
    case overviewRoute:
      targetPage = const OverviewPage();
      break;
    case settingsRoute:
      targetPage = const SettingsPage();
      break;
    default:
      targetPage = const NotFoundPage();
  }

  // 等当前帧渲染完成后设置标题，避免未挂载异常
  WidgetsBinding.instance.addPostFrameCallback((_) {
    SystemChrome.setApplicationSwitcherDescription(
      ApplicationSwitcherDescription(
        label: getTabTitle(null),
        primaryColor: Theme.of(context).primaryColor.value,
      )
    );
  });

  return MaterialPageRoute(
    builder: (context) => targetPage,
    settings: settings,
  );
}

方案二：路由观察者全局监听（推荐） #

如果项目中存在匿名路由跳转、混用第三方路由库的场景，把标题逻辑耦合在onGenerateRoute里容易漏判，用NavigatorObserver可以全局监听所有路由的push、pop、replace事件，覆盖所有路由切换场景。

1. 自定义路由观察者类：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:./routes.dart';

class WebTitleObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    super.didPush(route, previousRoute);
    _setWebTitle(route.settings.name);
  }

  @override
  void didPop(Route route, Route? previousRoute) {
    super.didPop(route, previousRoute);
    if (previousRoute != null) _setWebTitle(previousRoute.settings.name);
  }

  @override
  void didReplace({Route? newRoute, Route? oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    if (newRoute != null) _setWebTitle(newRoute.settings.name);
  }

  void _setWebTitle(String? routeName) {
    String title;
    switch(routeName) {
      case loginRoute:
        title = 'Login';
        break;
      case dashboardRoute:
        title = 'Dashboard';
        break;
      case overviewRoute:
        title = 'Overview';
        break;
      case settingsRoute:
        title = 'Settings';
        break;
      default:
        title = 'Admin | Borku Africa';
    }

    WidgetsBinding.instance.addPostFrameCallback((_) {
      SystemChrome.setApplicationSwitcherDescription(
        ApplicationSwitcherDescription(
          label: title,
          primaryColor: 0xFF2196F3, // 替换为项目主题主色值即可
        )
      );
    });
  }
}

2. 在MaterialApp中注册观察者，无需改动原有路由逻辑：

MaterialApp(
  // 保留原有配置、onGenerateRoute等代码
  navigatorObservers: [
    WebTitleObserver(),
  ],
)

注意事项 #

• 不推荐直接通过dart:html操作document.title设置标题，该方式在PWA模式、多Flutter视图场景下会出现状态不同步问题。
• 所有标题设置操作放在addPostFrameCallback中执行，避免路由构建阶段组件未挂载导致的上下文异常。
• 若使用go_router、auto_route等第三方路由库，方案二的观察者逻辑同样生效，无需额外适配。

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