Flutter中如何移除或隐藏Overlay？新手技术求助

你的代码里创建OverlayEntry后没保存它的引用，所以没法调用remove()方法来移除。按照下面的修改就能解决：

1. 在_MyHomePageState里添加一个OverlayEntry?类型的变量，用来保存创建的Overlay实例
2. 修改_insertOverlay方法，把创建的OverlayEntry赋值给这个变量，再插入到Overlay中
3. 在点击事件里调用overlayEntry?.remove()来移除Overlay，之后清空变量避免重复操作

修改后的完整代码：

class MyHomePage extends Stateful Widget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 保存OverlayEntry引用
  OverlayEntry? _overlayEntry;

  void _insertOverlay(BuildContext context) {
    // 避免重复创建Overlay
    if (_overlayEntry != null) return;
    
    _overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        top: 0,
        left: 0,
        child: Material(
          color: const Color(0xFF0E3311).withOpacity(0.5),
          child: GestureDetector(
            onTap: () {
              print('OVERLAY ON');
              // 移除Overlay
              _overlayEntry?.remove();
              // 清空引用
              _overlayEntry = null;
            },
            child: Container(decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.redAccent)),
          ),
        ),
      );
    });
    // 插入Overlay到视图树
    Overlay.of(context).insert(_overlayEntry!);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              'Flutter application',
            ),
            Text(
              '',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => WidgetsBinding.instance.addPostFrameCallback((_) => _insertOverlay(context)),
        child: const Icon(Icons.add),
      ),
    );
  }
}

关键说明：

• 用_overlayEntry变量保存Overlay实例，才能在点击事件中调用remove()方法完成移除
• 增加空判断防止重复创建Overlay，避免多次点击FAB生成多层覆盖
• 移除后清空_overlayEntry，确保下次点击FAB能重新生成Overlay

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