Flutter 的 Web 支援

Flutter 在 Web 上提供與移動端相同的體驗。

藉助 Dart 的可移植性、Web 平臺的強大功能、Flutter 框架的靈活性以及 WebAssembly 的高效能，您可以使用同一程式碼庫為 iOS、Android 和瀏覽器構建應用程式。對於您的應用而言，Web 只是另一個裝置目標平臺。

若要開始，請訪問 使用 Flutter 構建 Web 應用。

Dart 和 Flutter 可以編譯為 WebAssembly，這是一種二進位制指令格式，支援在所有主流瀏覽器上執行快速的應用程式。

若要了解使用 WebAssembly 的優勢，請檢視以下影片。

在 YouTube 上新標籤頁中觀看：“Flutter 的新功能 - WebAssembly”

為 Flutter 新增 Web 支援，不僅涉及將 Dart 編譯為 JavaScript（而非用於移動應用的 ARM 機器碼），還涉及在標準 Web API 之上實現 Flutter 的核心繪圖層。透過結合使用 DOM、Canvas 和 WebAssembly，Flutter 能夠在現代瀏覽器中提供可移植、高質量且高效能的使用者體驗。我們完全用 Dart 實現了核心繪圖層，並利用 Dart 最佳化的 JavaScript 編譯器將 Flutter 核心、框架以及您的應用程式編譯成一個單一的、經過壓縮的原始檔，該檔案可部署到任何 Web 伺服器上。

雖然您可以在 Web 上做很多事情，但 Flutter 的 Web 支援在以下場景中最有價值：

單頁應用程式 (SPA)

Flutter 的 Web 支援使複雜的獨立 Web 應用（富含圖形和互動內容）能夠觸達各種裝置上的終端使用者。

現有的移動應用程式

Flutter 的 Web 支援為現有的 Flutter 移動應用提供了一種基於瀏覽器的交付模型。

目前，並非所有 HTML 場景都最適合使用 Flutter。例如，諸如部落格文章這類富文字、基於流式佈局的靜態內容，更適合採用以文件為中心（document-centric）的 Web 模型，而不是 Flutter 這類 UI 框架所提供的以應用為中心（app-centric）的服務。不過，您可以使用 Flutter 將互動式體驗嵌入到這些網站中。

然而，如果您想使用 Dart 並希望實現傳統的基於 DOM 的網站，社群釋出的 Dart 包 Jaspr 支援靜態網站；事實上，Dart 文件、Flutter 文件 以及 營銷 網站都已經遷移到使用 Jaspr 包。請注意，Jaspr 使用的是 Dart（而非 Flutter），並且其 SEO 工作方式與傳統網站相同。

以下資源可以幫助您入門：

• 要為現有應用新增 Web 支援，或建立包含 Web 支援的新應用，請訪問 使用 Flutter 構建 Web 應用。
• 要在一個集中的檔案中配置 Web 開發伺服器設定，請檢視 設定 Web 開發配置檔案。
• 要了解 Flutter 的不同 Web 渲染器（CanvasKit 和 Skwasm），請檢視 Web 渲染器。
• 要了解如何建立響應式 Flutter 應用，請檢視 建立響應式應用。
• 要檢視常見問題及解答，請訪問 Web 常見問題解答 (FAQ)。
• 獲取程式碼示例，請檢視 Flutter Web 示例。
• 檢視 Flutter Web 應用演示，請體驗 Wonderous 應用。
• 要了解如何部署 Web 應用，請訪問 準備 Web 釋出版應用。
• 在 Flutter 主倉庫 提交 Issue。
• 您可以在 Discord 的 #help 頻道中交流並提問與 Web 相關的問題。