將 Web 內容嵌入到 Flutter Web 應用中

在某些情況下，Flutter Web 應用需要嵌入非由 Flutter 渲染的 Web 內容。例如，嵌入 google_maps_flutter 檢視（使用 Google Maps JavaScript SDK）或 video_player（使用標準的 video 元素）。

Flutter Web 可以在 Widget 的邊界內渲染任意 Web 內容，上述示例包所使用的底層元件，所有 Flutter Web 應用均可使用。

HtmlElementView Flutter 元件在佈局中預留出一塊空間，用於填充任何 HTML 元素。它有兩個建構函式

• HtmlElementView.fromTagName.
• HtmlElementView 和 registerViewFactory。

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 互動的資訊，請檢視 package:web 中的 HTMLVideoElement 類。

要了解更多關於被轉換為 web.HTMLVideoElement 的影片 Object 的資訊，請檢視 Dart 的 JS 互操作性文件。

如果您需要更精細地控制注入的 HTML 程式碼，可以使用 Flutter 實現 fromTagName 建構函式所使用的底層元件。在這種情況下，需要為您應用中新增的每種型別的 HTML 內容註冊您自己的 HTML 元素工廠。

這種方式生成的程式碼較多，且每種平臺檢視型別需要分兩步實現：

1. 使用 dart:ui_web 提供的 platformViewRegistry.registerViewFactory 註冊 HTML 元素工廠。
2. 在應用的元件樹中透過 HtmlElementView('viewType') 放置具有所需 viewType 的元件。

關於此方法的更多詳細資訊，請檢視 HtmlElementView 元件文件。

在 Flutter 應用中嵌入完整的 HTML 頁面是一項非常常見的功能，因此 Flutter 團隊提供了一個外掛來實現此目的。

• package:webview_flutter