叠加层中的剪切路径

Question

我有几个要用Wrap()小部件渲染的项目，在点击时应insert()覆盖（或Opacity()和AbsorbPointer()）隐藏其周围的其他项目/小部件＆我希望突出显示当前选定的小部件（在叠加层上方，或者可能会切掉叠加层）。

然后用户点击任何项目，

这是我想要得到的结果-

这就是我渲染项目列表的方式。

当用户点击一个项目时，将显示覆盖图（并且上一个处于关闭状态）。

注意：我使用全局键获取水龙头上每个项目的宽度，高度，x位置和y位置。

Container(
  child: Column(
    children: [
      SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Wrap(
          direction: Axis.horizontal,
          runSpacing: MediaQuery.of(context).size.height * 0.015,
          alignment: WrapAlignment.spaceBetween,
          runAlignment: WrapAlignment.spaceBetween,
          crossAxisAlignment: WrapCrossAlignment.start,
          children: infrastructureTypes
              .map<Widget>((type) => MkInfrastructureComponent(
                    type: type,
                    onTap: (type, config, id) {
                      if (overlayEntry != null) {
                        _hideOverlay();
                      }

                      _showOverlay(context, type: type, childConfig: config);
                    },
                  ))
              .toList(),
        ),
      ),
    ],
  ),
),

显示和隐藏叠加层

void _showOverlay(
  BuildContext ctx, {
  @required InfrastructureType type,
  @required WidgetConfig childConfig,
}) {
  OverlayState overlayState = Overlay.of(context);
  overlayEntry = OverlayEntry(
      builder: (ctx) => Positioned(
            left: 0 + MediaQuery.of(context).size.width * 0.02,
            right: MediaQuery.of(context).size.width * 0.02,
            top: childConfig.yPosition + childConfig.height,
            height: type.children.length * childConfig.height + _arrowHeight,
            child: CustomDropDown(),
          ));


  WidgetsBinding.instance.addPostFrameCallback((_) => overlayState.insert(overlayEntry));
}

void _hideOverlay() {
  overlayEntry?.remove();
  overlayEntry = null;
}

我的问题是，如何在图像2中实现UI布局。。

是否可能在叠加层上为当前所选项目剪切路径？