flutter - 如何在 flutter 中在整个应用程序顶部显示叠加层？

Question

我想在整个应用程序上显示覆盖，因此我尝试在 MaterialApp(根小部件)的上下文中插入覆盖条目，但问题是我在调用以下方法时得到空值:

Overlay.of(context);

GetMaterialApp.router(
          debugShowCheckedModeBanner: false,
          theme: AppTheme.lightTheme,
          scaffoldMessengerKey: Keys.scaffold,
          scrollBehavior: MyCustomScrollBehavior(),
          routeInformationParser: WebRoutes.goRouter.routeInformationParser,
          routerDelegate: WebRoutes.goRouter.routerDelegate,
          routeInformationProvider: WebRoutes.goRouter.routeInformationProvider,
          builder: (context, child) {

          WidgetsBinding.instance.addPostFrameCallback((_){
              addOverlay(context);
            });
           
            return child;

}

void addOverlay(BuildContext context) {
  print(Overlay.of(context));

  return Overlay.of(context)?.insert(OverlayEntry(
    builder: (context) {
      return SomeWidget();
    },
  ));
}

有什么方法可以使用此根小部件的上下文来获取叠加层的状态，因为我想全局显示叠加层。

非常感谢，如果有人帮助我，我真的很感激。

Answer 1

MaterialApp(
        navigatorKey: getIt.get<NavigatorService>().navigatorKey,
        theme: AppTheme.defaultTheme,
        initialRoute: AppRoutes.splashScreen,
        builder: (context, child) {
          return Scaffold(
            body: Stack(
              children: [
                child!,
                Positioned(
                  top: 15,
                  child: Container(
                    color: Colors.red,
                    height: 50,
                    width: MediaQuery.of(context).size.width,
                    child: const Center(child: Text("HI I AM AN OVERLAY")),
                  ),
                ),
              ],
            ),
          );
        },
        onGenerateRoute: AppRoutes.onGenerateRoute,
      ),