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,
),
],
);
PointerInterceptor is a widget that prevents mouse events (in web) from being captured by an underlying HtmlElementView.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With