如何在 flutter 中显示覆盖整个应用程序的顶部？答案

【问题标题】：How can I show overlay on top of the whole app in flutter?如何在 flutter 中显示覆盖整个应用程序的顶部？
【发布时间】：2023-01-30 21:22:22
【问题描述】：

我想在整个应用程序上显示一个叠加层，所以我尝试在 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();
    },
  ));
}

有什么方法可以使用此根小部件的上下文来获取覆盖状态，因为我想在全局范围内显示覆盖。

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

【问题讨论】：

您遇到的错误是什么？
我得到了空值，我没有覆盖我传递的上下文。
Overlay.of(context) 这个方法返回null。
我认为您正在使用没有 Material aap 的上下文调用叠加层。我无法准确告诉您，请分享您在调用叠加层后遇到的确切错误/异常

标签： flutter overlay

【解决方案1】：

import 'package:flutter/material.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';
import 'package:go_router/go_router.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(App2());
}

class App2 extends StatelessWidget {
  App2({super.key});
  final _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const OverlayWrapper(),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp.router(
      routeInformationParser: _router.routeInformationParser,
      routerDelegate: _router.routerDelegate,
      routeInformationProvider: _router.routeInformationProvider,
    );
  }
}

class OverlayWrapper extends StatefulWidget {
  const OverlayWrapper({Key? key}) : super(key: key);

  @override
  State<OverlayWrapper> createState() => _OverlayWrapperState();
}

class _OverlayWrapperState extends State<OverlayWrapper> {
  @override
  void initState() {
    super.initState();
  }

  showOverLay() {
    OverlayEntry overlayEntry = OverlayEntry(
      builder: (context) => Container(
        color: Colors.red,
        child: const Text('data'),
      ),
    );
    Overlay.of(context).insert(overlayEntry);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showOverLay();
          },
          child: const Text(
            'ShowOverlay',
            style: TextStyle(),
          ),
        ),
      ),
    );
  }
}

【讨论】：