In some cases, Flutter web applications need to embed web content not rendered by Flutter. For example, embedding agoogle_maps_flutter view (which uses the Google Maps JavaScript SDK) or avideo_player (which uses a standardvideo element).

Flutter web can render arbitrary web content within the boundaries of aWidget, and the primitives used to implement the example packages mentioned previously, are available to all Flutter web applications.

TheHtmlElementView Flutter widget reserves a space in the layout to be filled with any HTML Element. It has two constructors:

• HtmlElementView.fromTagName.
• HtmlElementView andregisterViewFactory.

TheHtmlElementView.fromTagName constructor creates an HTML Element from itstagName, and provides anonElementCreated method to configure that element before it's injected into the DOM:

// Create a `video` tag, and set its `src` and some `style` properties...HtmlElementView.fromTag('video',onElementCreated:(Objectvideo){videoasweb.HTMLVideoElement;video.src='https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4';video.style.width='100%';video.style.height='100%';// other customizations to the element...});

To learn more about the way to interact with DOM APIs, check out theHTMLVideoElement class inpackage:web.

To learn more about the videoObject that is cast toweb.HTMLVideoElement, check out Dart'sJS Interoperability documentation.

If you need more control over generating the HTML code you inject, you can use the primitives that Flutter uses to implement thefromTagName constructor. In this scenario, register your own HTML Element factory for each type of HTML content that needs to be added to your app.

The resulting code is more verbose, and has two steps per platform view type:

1. Register the HTML Element Factory usingplatformViewRegistry.registerViewFactory provided bydart:ui_web.
2. Place the widget with the desiredviewType withHtmlElementView('viewType') in your app's widget tree.

For more details about this approach, check outHtmlElementView widget docs.

Embedding a full HTML page inside a Flutter app is such a common feature, that the Flutter team offers a plugin to do so:

• package:webview_flutter