Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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));

enter image description here enter image description here

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,
    ),
  ],
);
like image 388
Szilard Ban Avatar asked Oct 16 '22 02:10

Szilard Ban


2 Answers

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

like image 179
Martin Schaefer Avatar answered Nov 01 '22 13:11

Martin Schaefer


If you are still struggling with PointerInterceptor, you can look at DropzoneView from the package flutter_dropzone. When stacked above the iFrame it prevented the clicks from being captured by the underlying iFrame.

I created a conditional stack element that placed this DropzoneView when I needed this behavior. I just could not get PointerInterceptor to work.

This is worth a try. Maybe this will help - comment with your experience here.

like image 23
Sunil Gupta Avatar answered Nov 01 '22 14:11

Sunil Gupta