'Multiple html div with iframes - issues in Flutter web

I have a user input that starts with an IFrame element, that renders a video. To support interactivity (like a '+' button) I use a div as a child of a SizedBox that is stacked on top of the IFrame. This works great, and the button is clickable.

Widget blockIframeEvents(Key key) {
  final html.DivElement div = html.DivElement();
  final divId = key.toString();

  div.text = 'XXX';

  div.style.width = '100%';
  div.style.height = '100%';

  // ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(
    divId,
    (int viewId) => div,
  );

  return HtmlElementView(
    key: key,
    viewType: divId,
  );
}

If I add more IFrames, each with their own div, after three IFrames (or so) the added IFrames do not display any content, nor the test 'XXX' in the div.

Moving the Iframes (using ReorderableListView) makes only the upper Iframes display their contents.

Removing the divs enable all iFrame contents.

What am I doing wrong?

flutter-web

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Multiple html div with iframes - issues in Flutter web

Sources

Related Questions