Flutter全局Overlay显示问题：根上下文获取Overlay实例为空

问题根源 #

你在GetMaterialApp.builder中使用的上下文属于GetMaterialApp本身，而全局的Overlay是GetMaterialApp内部为页面路由创建的子组件，这个上下文的查找路径里找不到Overlay，所以Overlay.of(context)返回null。

可行解决方案 #

方法一：通过Navigator获取Overlay

Navigator内部持有全局Overlay的实例，直接通过它获取即可：

void addOverlay(BuildContext context) {
  final overlay = Navigator.of(context).overlay;
  print(overlay);

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

方法二：使用Builder获取子级上下文

在GetMaterialApp的builder中用Builder包裹child，拿到属于页面内容层级的上下文，这个上下文可以正确找到Overlay：

GetMaterialApp.router(
  // 其他配置项保持不变
  builder: (context, child) {
    return Builder(
      builder: (innerContext) {
        WidgetsBinding.instance.addPostFrameCallback((_) {
          addOverlay(innerContext);
        });
        return child;
      },
    );
  },
);

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

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

如果你的SomeWidget需要和页面路由逻辑交互，第二种方法的上下文会更适配需求。

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