Flutter: Global Overlay can not be displayed with MaterialApp.router when i use go router

Question

i want to display a global overlay loading instance in my main app widget it works fine inside materialApp but when i used go router and turn it into MaterialApp.router the state is changed but the ovelay did not show up

here is my old code (this works)

 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();
          }
        },
      ),
    );
  }

new code with go router (this does not work)

  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,

    );

Croteau

Answer 1

I experience this too. For some reason MaterialApp.router isn't making a global Overlay available, like MaterialApp does:

Although you can create an Overlay directly, it's most common to use the overlay created by the Navigator in a WidgetsApp, CupertinoApp or a MaterialApp. The navigator uses its overlay to manage the visual appearance of its routes.

Adding this to your MaterialApp.router will fix the issue:

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

Barbarbarbara