Flutter web - Parent widget is not scrolling when mouse over is on HtmlElementView Widget for iframe

Question

In Flutter web project, We are embedding Webview inside a List through HtmlElementView widget. Parent widget is not scrolling when the mouse over is on HtmlElementView Widget.

We are getting height of web content and assigning that height to the container height. so, there is no scroll since content height and container height is same. but parent widget scroll is not blocking.

The cursor doesn't move at all when it is inside HtmlElementView. Please let me know if any solution for this issue. Below are my code snippet,

import 'dart:html' as html;
import 'dart:ui' as ui;

html.window.addEventListener('message', listen);
iframeElement.id = 'extra-frame';
iframeElement.src = webViewModel.guideUrl;
iframeElement.style.border = 'none';

// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
iframeElement.id,
(int viewId) {
return iframeElement;
},
);

Container(
height: webViewModel.webViewHeight != null ? webViewModel.webViewHeight : 300,
child: HtmlElementView(
key: UniqueKey(),
viewType: iframeElement.id,
)
)

score 0 · Answer 1 · answered Aug 14 '22 at 16:47

If there is no interaction with the content in the webview needed you can overlay the HtmlElementView with a SizedBox of the same size in a Stack and wrap the SizedBox with a PointerInterceptor widget.

Stack(
  children: [
    Container(
      height: webViewModel.webViewHeight != null ? webViewModel.webViewHeight : 300,
      child: HtmlElementView(
        key: UniqueKey(),
        viewType: iframeElement.id,
      )
    ),
    PointerInterceptor(
      child: SizedBox(
        height:  webViewModel.webViewHeight != null ? webViewModel.webViewHeight : 300,
        width: MediaQuery.of(context).size.width,
        )
      )
  ],
)

Flutter web - Parent widget is not scrolling when mouse over is on HtmlElementView Widget for iframe

1 Answers1