如何使用原生Flutter获取Material App页面标题（Beamer迁GoRouter）

方案一：通过路由元数据存储并获取标题（推荐） #

先在GoRouter的路由定义里给每个页面添加meta字段存储标题：

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      name: 'home',
      builder: (_, __) => const HomePage(),
      meta: {'title': '首页'}, // 存入页面标题
    ),
    GoRoute(
      path: '/settings',
      name: 'settings',
      builder: (_, __) => const SettingsPage(),
      meta: {'title': '设置页面'},
    ),
  ],
);

然后在标题组件里，通过GoRouterState拿到当前路由的元数据，嵌套路由场景下取最后一个匹配的路由标题：

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

  @override
  Widget build(BuildContext context) {
    final state = GoRouterState.of(context);
    final lastRoute = state.matchedRoutes.last;
    final title = lastRoute.meta?['title'] as String?;
    return Text(title ?? '默认标题');
  }
}

方案二：用路由名称映射标题 #

如果不想用meta，可以提前建立路由名称到标题的映射表：

const routeTitleMap = {
  'home': '首页',
  'settings': '设置页面',
};

然后在组件里通过当前路由名称匹配对应标题：

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

  @override
  Widget build(BuildContext context) {
    final state = GoRouterState.of(context);
    final title = routeTitleMap[state.name];
    return Text(title ?? '默认标题');
  }
}

方案三：从页面组件静态属性获取 #

如果每个页面组件本身定义了静态title属性：

class HomePage extends StatelessWidget {
  const HomePage({super.key});
  static const title = '首页';

  @override
  Widget build(BuildContext context) => Scaffold();
}

可以通过GoRouterState的page属性判断组件类型来获取标题（适合页面数量较少的场景）：

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

  @override
  Widget build(BuildContext context) {
    final state = GoRouterState.of(context);
    String? title;
    final currentPage = state.page;
    if (currentPage is HomePage) {
      title = HomePage.title;
    } else if (currentPage is SettingsPage) {
      title = SettingsPage.title;
    }
    return Text(title ?? '默认标题');
  }
}

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