在MaterialApp外部监听Flutter路由，实现自定义固定AppBar响应

这问题我之前也碰到过，MaterialApp外部的Widget要监听内部路由确实有点 tricky——默认的RouteObserver是和Navigator绑定的，外部上下文拿不到对应的NavigatorState，所以直接订阅肯定行不通。不过咱们可以通过一个全局状态桥接层来传递路由事件，完美解决固定AppBar+路由监听的需求，还能避开initState触发的问题。

第一步：创建全局路由状态通知器 #

先搞个简单的ChangeNotifier，用来存储当前路由名称并通知外部Widget更新。它就像个“消息中转站”，把MaterialApp内部的路由变化传递给外部的AppBar：

class RouteChangeNotifier extends ChangeNotifier {
  String? currentRouteName;
  bool _isInitialRoute = true; // 用来跳过初始路由的通知

  void updateRouteName(String? routeName) {
    if (_isInitialRoute) {
      // 初始路由只设置值，不触发通知，避免initState阶段的不必要更新
      currentRouteName = routeName;
      _isInitialRoute = false;
      return;
    }
    if (currentRouteName != routeName) {
      currentRouteName = routeName;
      notifyListeners(); // 路由变化时通知订阅者
    }
  }
}

第二步：自定义RouteObserver捕获内部路由事件 #

接下来写一个自定义的RouteObserver，它会监听MaterialApp内部的路由跳转（push/pop/replace），然后把路由名称传给上面的RouteChangeNotifier：

class AppRouteObserver extends RouteObserver<PageRoute<dynamic>> {
  final RouteChangeNotifier routeNotifier;

  AppRouteObserver(this.routeNotifier);

  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    if (route is PageRoute) {
      routeNotifier.updateRouteName(route.settings.name);
    }
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    if (previousRoute is PageRoute) {
      routeNotifier.updateRouteName(previousRoute.settings.name);
    }
  }

  @override
  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    if (newRoute is PageRoute) {
      routeNotifier.updateRouteName(newRoute.settings.name);
    }
  }
}

第三步：配置MaterialApp并关联路由监听 #

把自定义的AppRouteObserver加到MaterialApp的navigatorObservers里，这样它就能捕获所有路由变化了。这里用全局单例的RouteChangeNotifier最方便，不用额外的状态管理库：

// 全局单例，整个App共享
final routeNotifier = RouteChangeNotifier();

void main() {
  runApp(const RootWidget());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [AppRouteObserver(routeNotifier)], // 关联自定义观察者
      initialRoute: '/home',
      routes: {
        '/home': (context) => const HomeScreen(),
        '/profile': (context) => const ProfileScreen(),
        '/settings': (context) => const SettingsScreen(),
      },
    );
  }
}

第四步：实现固定在外部的自定义AppBar #

现在把你的自定义AppBar放在MaterialApp外面，用ListenableBuilder监听全局的routeNotifier，根据当前路由动态更新内容：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomFixedAppBar(), // 固定在顶部的AppBar
      body: const MyApp(), // 内部是MaterialApp
    );
  }
}

class CustomFixedAppBar extends StatelessWidget implements PreferredSizeWidget {
  const CustomFixedAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: routeNotifier,
      builder: (context, child) {
        // 根据当前路由动态设置标题、样式等
        String appBarTitle = switch (routeNotifier.currentRouteName) {
          '/home' => '首页',
          '/profile' => '我的',
          '/settings' => '设置',
          _ => '默认标题',
        };

        return AppBar(
          title: Text(appBarTitle),
          backgroundColor: Colors.blueAccent,
          // 这里可以加更多自定义逻辑，比如根据路由显示/隐藏按钮
          actions: [
            if (routeNotifier.currentRouteName == '/home')
              IconButton(
                icon: const Icon(Icons.search),
                onPressed: () {},
              ),
          ],
        );
      },
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

关键注意事项 #

1. 路由名称要统一：确保你的routes配置里的名称和route.settings.name一致，不然监听会失效。如果用onGenerateRoute，也要手动设置settings.name。
2. 跳过初始路由通知：上面的_isInitialRoute标志完美解决了initState阶段触发更新的问题，如果你需要初始路由也触发通知，去掉这个逻辑就行。
3. 替代方案：如果不想用ChangeNotifier，也可以用StreamController做广播流，但要记得在Widget销毁时取消订阅，避免内存泄漏；用ChangeNotifier的话，ListenableBuilder会自动处理订阅/取消，更省心。

这样一来，你的自定义AppBar就能稳稳固定在顶部，同时实时响应MaterialApp内部的路由变化了！

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