如何使 OverlayEntry 构建器删除自身

Question

我正在尝试使用一些按钮构建一个覆盖条目。我希望覆盖层内的按钮在按下时调用

entry.remove()

，但当然我不能在分配它之前使用 OverlayEntry。有解决这个问题的方法吗？

OverlayState overlayState = Overlay.of(context);
OverlayEntry overlayEntry = OverlayEntry(builder: (context) {
    return Align(
      alignment: alignment,
      child: FittedBox(
        child: Material(
          color: Colors.transparent,
          child: Container(
            width: width,
            height: height,
            decoration: BoxDecoration(
                color: backgroundColor, borderRadius: borderRadius),
            padding: padding,
            margin: EdgeInsets.only(
                left: left, top: top, right: right, bottom: bottom),
            child: IconButton(icon:Icon(Icons.check), onPressed: () {
entry?.remove()}),
          ),
        ),
      ),
    );
  });
  overlayState.insert(overlayEntry);

我尝试只使用 Entry?.remove() 但没有成功。

Answer 1

您可以使用 Late，这是一个它的工作示例。

class F312 extends StatefulWidget {
  const F312({super.key});

  @override
  State<F312> createState() => _F312State();
}

class _F312State extends State<F312> {
  late OverlayState overlayState = Overlay.of(context);
  late OverlayEntry overlayEntry = OverlayEntry(builder: (context) {
    return Align(
      alignment: Alignment.center,
      child: FittedBox(
        child: Material(
          color: Colors.transparent,
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.circular(10)),
            child: TextButton(
              onPressed: () => overlayEntry.remove(),
              child: const Text("Close"),
            ),
          ),
        ),
      ),
    );
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () => overlayState.insert(overlayEntry),
            child: const Text("Show"),
          ),
        ],
      ),
    );
  }
}