Flutter中Overlay窗口下拉菜单不显示及Navigator错误解决

问题原因 #

DropdownButton展开下拉菜单时，需要依赖包含Navigator的上下文(Context)，如果Overlay弹窗使用的上下文不在Navigator的子树中，就会触发Navigator operation requested with a context that does not include a Navigator.错误。

具体修复方案 #

1. 确保创建Overlay时使用页面级上下文 #

在触发弹窗的页面（unit_screen.dart）中，点击InkWell时传入当前页面的上下文（该上下文属于Navigator子树）：

// unit_screen.dart
InkWell(
  onTap: () {
    // 传入当前页面的context，而非根context
    showOverlay(context);
  },
  child: Text("打开弹窗"),
)

2. 为DropdownButton指定正确的上下文 #

在overlay_screen.dart的弹窗构建中，将外部传入的页面上下文传递给DropdownButton的context参数，确保它能找到Navigator：

// overlay_screen.dart
String? selectedOption = "kg";

void showOverlay(BuildContext pageContext) {
  final overlay = Overlay.of(pageContext);
  final overlayEntry = OverlayEntry(
    builder: (overlayContext) {
      return Material(
        color: Colors.transparent,
        child: Container(
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          color: Colors.white,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              DropdownButton<String>(
                // 传入页面级上下文，确保能访问Navigator
                context: pageContext,
                value: selectedOption,
                items: const [
                  DropdownMenuItem(value: "kg", child: Text("千克")),
                  DropdownMenuItem(value: "g", child: Text("克")),
                ],
                onChanged: (value) {
                  // 更新选中值并刷新Overlay
                  selectedOption = value;
                  overlayEntry.markNeedsBuild();
                },
              ),
              SizedBox(height: 12),
              TextFormField(
                decoration: InputDecoration(hintText: "输入数值"),
              ),
            ],
          ),
        ),
      );
    },
  );
  overlay.insert(overlayEntry);
}

3. 确保弹窗包含Material环境 #

DropdownButton依赖Material组件的样式和上下文，必须将弹窗内容包裹在Material组件内（如上述代码所示），否则不仅会出现Navigator问题，还可能导致样式异常。

4. 检查main.dart的结构正确性 #

确保MaterialApp作为根组件，页面（如UnitScreen）直接作为home或路由页面存在，保证页面上下文在Navigator子树中：

// main.dart
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "全局Overlay示例",
      debugShowCheckedModeBanner: false,
      home: UnitScreen(),
    );
  }
}

内容的提问来源于stack exchange，提问作者brian okeefe