Flutter Navigator 2.0 如何在Web端动态修改浏览器标签页的Page Title

问题原因 #

你当前使用的SystemChrome.setApplicationSwitcherDescription API最初是为移动端任务切换器的标题设计的，新版Flutter Web已不再将该接口的调用映射到浏览器标签页标题，所以不会生效。

推荐解决方案（无额外依赖、跨平台） #

直接使用Flutter内置的Title组件，该组件会自动适配不同平台：Web端修改浏览器标签标题，移动端修改任务管理器卡片标题。
你只需要修改DemoPage的build方法，将Scaffold外层包裹Title组件即可：

@override
Widget build(BuildContext context) {
  // 删掉原来的SystemChrome调用代码，替换为下面的实现
  return Title(
    title: title,
    color: Theme.of(context).primaryColor,
    child: Scaffold(
      // 原有Scaffold的所有代码保持不变
      appBar: AppBar(
        title: Text(title),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              text,
              style: Theme.of(context).textTheme.headline5,
            ),
            SizedBox(
              height: 10,
            ),
            Visibility(
              visible: onChanged != null,
              child: ElevatedButton(
                  onPressed: () {
                    onChanged!(!active);
                  },
                  child: Text('Click Me!')),
            )
          ],
        ),
      ),
    ),
  );
}

修改完成后运行项目，切换页面时浏览器标签标题就会自动同步更新。

可选方案（仅Web端） #

如果需要更灵活的直接操作浏览器属性，可以直接调用Web原生API修改标题：

// 仅支持Web平台，导入dart:html
import 'dart:html' as html;

// 任意位置需要修改标题时调用
html.document.title = '自定义页面标题';

如果需要同时兼容移动端和Web，可以增加平台判断，Web端用上述代码，移动端保留SystemChrome调用即可。

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