Flutter无命名路由下如何判断当前页面？

你遇到的问题很典型：手动通过Navigator.push+MaterialPageRoute跳转的页面，ModalRoute.of(context)?.settings.name返回null，这是因为这种无命名路由方式不会自动给路由设置name属性。下面给你几种不用命名路由也能判断当前页面的方案：

1. 手动给MaterialPageRoute设置settings.name #

既然命名路由的本质是提前绑定了路由名称和页面，那我们在手动跳转时也可以给MaterialPageRoute的settings参数指定name，这样就能沿用你熟悉的ModalRoute.of(context)?.settings.name来判断页面：

修改跳转代码：

ElevatedButton(
  onPressed: () => Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => const MyUnroutedPage(),
      // 手动设置路由名称
      settings: const RouteSettings(name: 'MyUnroutedPage'),
    ),
  ),
  child: const Text("Unrouted"),
)

之后在MyUnroutedPage中调用print(ModalRoute.of(context)?.settings.name)就会输出MyUnroutedPage。

2. 通过Widget类型直接判断 #

如果只是要判断当前页面是哪个Widget，直接用runtimeType或is关键字更直接，不需要依赖路由设置：

比如在任意页面中：

@override
Widget build(BuildContext context) {
  // 判断当前页面类型
  if (this is MyUnroutedPage) {
    print('当前是MyUnroutedPage');
  } else if (this is MyRoutedPage) {
    print('当前是MyRoutedPage');
  }
  
  // 或者直接打印类型
  print(runtimeType);
  
  return const Scaffold(body: Placeholder());
}

3. 传递自定义标识作为路由参数 #

如果需要更灵活的标识（比如除了页面类型外还要传递额外信息），可以通过RouteSettings.arguments传递自定义数据：

跳转时：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const MyUnroutedPage(),
    settings: const RouteSettings(
      arguments: {'pageId': 'unrouted_page', 'desc': '无命名路由页面'},
    ),
  ),
)

在页面中获取：

@override
Widget build(BuildContext context) {
  final args = ModalRoute.of(context)?.settings.arguments as Map?;
  if (args?['pageId'] == 'unrouted_page') {
    print('当前是无命名路由页面');
  }
  return const Scaffold(body: Placeholder());
}

4. 使用RouteObserver全局监听页面状态 #

如果需要全局跟踪页面跳转状态（比如统计页面访问、统一处理页面生命周期），可以使用RouteObserver：

1. 先在MaterialApp中注册观察者：

final routeObserver = RouteObserver<ModalRoute<void>>();

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [routeObserver], // 注册观察者
      initialRoute: '/test',
      routes: {'/test': (context) => const MyRoutedPage()},
    );
  }
}

2. 在页面中混入RouteAware并订阅观察者：

class MyUnroutedPage extends StatefulWidget {
  const MyUnroutedPage({super.key});

  @override
  State<MyUnroutedPage> createState() => _MyUnroutedPageState();
}

class _MyUnroutedPageState extends State<MyUnroutedPage> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 订阅路由观察者
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    // 取消订阅
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPush() {
    // 页面被推入时触发
    print('MyUnroutedPage 已进入');
  }

  @override
  void didPop() {
    // 页面被弹出时触发
    print('MyUnroutedPage 已离开');
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Placeholder());
  }
}

补充说明 #

官网不推荐命名路由主要是因为它在复杂场景下（比如动态路由、参数传递、模块化）不够灵活，而手动创建MaterialPageRoute的方式更可控。你之前的理解没有问题，只是无命名路由需要我们自己补充页面标识的逻辑。

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