How to prevent flutter web htmlelementview from catching touches from objects above it?

Question

I am using an HTML element view from dart:html to display a webpage inside my flutter web app. It catches all the touches in its area, including the ones on the FAB above it, and also the ones on the drawer of the scaffold in context. I don't even need touch input on the webview, I just want to display it. Also, note that absorbpointer and ignorepointer do not solve the problem. Here is the code displaying the webpage, inside the body of the scaffold.

final IFrameElement _iframeElement = IFrameElement();
_iframeElement.src = "webpageurl";
_iframeElement.style.border = 'none';
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
  'iframeElement',
  (int viewId) => _iframeElement,
);
Widget _iframeWidget;
_iframeWidget = HtmlElementView(
  key: UniqueKey(),
  viewType: 'iframeElement',
);
return Center(child: IgnorePointer(child: _iframeWidget));

Edit:

final IFrameElement _iframeElement = IFrameElement();
_iframeElement.src = "https://index.hu/";
_iframeElement.style.border = 'none';
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
  'iframeElement',
  (int viewId) => _iframeElement,
);
Widget _iframeWidget;
_iframeWidget = HtmlElementView(
  key: UniqueKey(),
  viewType: 'iframeElement',
);
return Stack(
  children: <Widget>[
    IgnorePointer(
      ignoring: true,
      child: Center(
        child: _iframeWidget,
      ),
    ),
    Container(
      color: Colors.transparent,
    ),
  ],
);

Solution

PointerInterceptor is a widget that prevents mouse events (in web) from being captured by an underlying HtmlElementView.