将 Web 内容嵌入到 Flutter Web 应用中
了解如何在 Web 上加载和显示图像。
在某些情况下，Flutter Web 应用程序需要嵌入由 Flutter 渲染之外的 Web 内容。例如，嵌入 google_maps_flutter 视图（它使用 Google Maps JavaScript SDK）或 video_player（它使用标准的 video 元素）。
Flutter Web 可以在 Widget 的边界内渲染任意 Web 内容，并且之前提到的示例包中使用的基本组件，可供所有 Flutter Web 应用程序使用。
HtmlElementView
#
HtmlElementView Flutter 组件在布局中保留一个空间，用于填充任何 HTML 元素。它有两个构造函数
HtmlElementView.fromTagName.HtmlElementView和registerViewFactory。
HtmlElementView.fromTagName
#
HtmlElementView.fromTagName 构造函数 从其 tagName 创建一个 HTML 元素，并提供一个 onElementCreated 方法，以便在将其注入 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...
});
要了解更多关于与 DOM API 交互的方式，请查看 HTMLVideoElement 类 在 package:web 中。
要了解更多关于转换为 web.HTMLVideoElement 的 video Object，请查看 Dart 的 JS 互操作性 文档。
HtmlElementView 和 registerViewFactory
#
如果您需要更多控制权来生成注入的 HTML 代码，可以使用 Flutter 用于实现 fromTagName 构造函数的原始方法。在这种情况下，为需要添加到应用程序的每种 HTML 内容类型注册您自己的 HTML 元素工厂。
生成的代码更冗长，并且每个平台视图类型需要两个步骤
- 使用
dart:ui_web提供的platformViewRegistry.registerViewFactory注册 HTML 元素工厂。 - 将具有所需
viewType的小部件与HtmlElementView('viewType')放在应用程序的小部件树中。
有关此方法的更多详细信息，请查看 HtmlElementView 组件 文档。
package:webview_flutter
#
将完整的 HTML 页面嵌入到 Flutter 应用程序中是一个非常常见的特性，Flutter 团队为此提供了一个插件