Incrustar contenido web en una aplicación web de Flutter

En algunos casos, las aplicaciones web de Flutter necesitan incrustar contenido web que no es renderizado por Flutter. Por ejemplo, incrustar una vista de google_maps_flutter (que usa el SDK de JavaScript de Google Maps) o un video_player (que usa un elemento video estándar).

Flutter web puede renderizar contenido web arbitrario dentro de los límites de un Widget, y las primitivas utilizadas para implementar los paquetes de ejemplo mencionados anteriormente están disponibles para todas las aplicaciones web de Flutter.

El widget de Flutter HtmlElementView reserva un espacio en el diseño para llenarlo con cualquier elemento HTML. Tiene dos constructores:

• HtmlElementView.fromTagName.
• HtmlElementView y registerViewFactory.

El constructor HtmlElementView.fromTagName crea un elemento HTML a partir de su tagName, y proporciona un método onElementCreated para configurar ese elemento antes de ser inyectado en el DOM:

// Create a `video` tag, and set its `src` and some `style` properties...
HtmlElementView.fromTag('video', onElementCreated: (Object video) {
  video as web.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...
});

Para aprender más sobre la forma de interactuar con las APIs del DOM, consulta la clase HTMLVideoElement en package:web.

Para aprender más sobre el Object de video que se castea a web.HTMLVideoElement, consulta la documentación de interoperabilidad de JS de Dart.

Si necesitas más control sobre la generación del código HTML que inyectas, puedes usar las primitivas que utiliza Flutter para implementar el constructor fromTagName. En este escenario, registra tu propia fábrica de elementos HTML para cada tipo de contenido HTML que deba agregarse a tu aplicación.

El código resultante es más detallado y tiene dos pasos por cada tipo de vista de plataforma:

1. Registra la fábrica de elementos HTML usando platformViewRegistry.registerViewFactory provisto por dart:ui_web.
2. Coloca el widget con el viewType deseado con HtmlElementView('viewType') en el árbol de widgets de tu aplicación.

Para más detalles sobre este enfoque, consulta la documentación del widget HtmlElementView.

Incrustar una página HTML completa dentro de una aplicación de Flutter es una característica tan común que el equipo de Flutter ofrece un plugin para hacerlo:

• package:webview_flutter