Flutter：当我使用go router时，无法使用MaterialApp.router显示全局叠加

Question

我想在我的主应用程序小部件中显示全局覆盖加载实例 它在materialApp内部工作正常，但是当我使用go router并将其变成MaterialApp.router时 状态改变了但是overlay没有出现

这是我的旧代码（有效）

 Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My app',
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
        indicatorColor: Colors.blueGrey,
      ),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      debugShowCheckedModeBanner: false,
      home: Consumer(
        builder: (context, ref, child) {
          ref.listen<bool>(isLoadingProvider, (_, isloading) {
            if (isloading) {
              LoadingScreen.instance().show(context: context);
            } else {
              LoadingScreen.instance().hide();
            }
          });
          final isLoggedId = ref.watch(isLoggedInProvider);
          if (isLoggedId) {
            return const MainView();
          } else {
            return const AuthPage();
          }
        },
      ),
    );
  }

使用 go router 的新代码（这不起作用）

  ref.listen<bool>(isLoadingProvider, (_, isloading) {
      if (isloading) {
        LoadingScreen.instance().show(context: context);
      } else {
        LoadingScreen.instance().hide();
      }
    });
    
    final router = ref.watch(routerProvider);
  
    return MaterialApp.router(
      title: 'my app',
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
        indicatorColor: Colors.blueGrey,
      ),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      debugShowCheckedModeBanner: false,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,

    );

Answer 1

我也经历过这个。由于某种原因

MaterialApp.router

没有提供全局

Overlay

，就像

MaterialApp

那样：

虽然您可以直接创建 Overlay，但最常见的是使用 由导航器在 WidgetsApp、CupertinoApp 或中创建的覆盖层 一个 MaterialApp。导航器使用其覆盖层来管理视觉效果 其路线的外观。

将此添加到您的

MaterialApp.router

将解决该问题：

builder: (context, child) => Overlay(initialEntries: [OverlayEntry(builder: (context) => child!)])