Flutter Web 支持現已進入穩定版

做者 / Mariam Hasnany, Product Manager, Flutter

咱們對 Flutter 的願景是成爲一個可移植的 UI 框架，在全平臺上構建精美的應用體驗。作爲 Flutter 2 發佈內容的一部分，Flutter 的 web 支持已經抵達穩定版里程碑。

Flutter 的首個版本支持 iOS 和 Android，開發者們已經用它在移動應用商店發佈了超過 15 萬個應用。如今，隨着 web 支持的加入，這些應用能夠觸達更普遍的受衆，同時也開闢了在 web 上創建交互體驗的新途徑。

在這次初始版本的 web 支持中，咱們主要關注三個應用場景:

• 漸進式 web 應用 (Progressive web apps, PWA)，兼具 web 的高覆蓋面與桌面應用的強大功能。
• 單頁應用 (Single page apps, SPA)，只需一次加載，並與互聯網服務動態互傳數據。
• 將現有 Flutter 移動應用拓展到 web，在兩個平臺共享代碼。

這篇文章介紹了咱們迄今爲止的工做成果，並分享了幾個案例，意在幫助開發者在本身的應用中活用 Flutter 對 web 的支持。

△ iRobot Education 使用 Flutter 開發了 iRobot Coding 應用，經過此 web 應用向大衆提供編程學習體驗

Web 之旅

現在的 web 平臺比以往任什麼時候候都要豐富多彩，開發者可使用的工具包括: 硬件加速的 2D 和 3D 圖形，離線功能和安裝體驗，以及 對底層操做系統和硬件的訪問 等。在 web 這個底層平臺上已經創建起了 種類繁多的框架，所以，開發者在建立 web 應用時擁有極大的靈活性。

Flutter 是用 Dart 編寫的，而 Dart 能編譯成 JavaScript，因此咱們的下一步天然就是要探討支持 web 平臺的可能性。這符合咱們的願景，也就是提供一個可移植的框架，方便您在任何能描繪像素的地方構建出精美的 UI。

咱們的方法是，創建一個在全部平臺上都能使用的一致的工具包 (而不是創建兩個有着各類微妙差別的獨立框架)，以確保開發者的代碼運行時不會出現意外。

Flutter 框架由 一系列層結構 組成，其中包含:

• 框架，用於爲 widget、動畫和手勢等常見的習慣用法提供抽象
• 引擎，使用公開的系統 API 在目標設備上進行渲染

框架自己採用 Dart 編寫，大約 70 萬行 Flutter 框架核心代碼在全部平臺上相同: 包括移動端、桌面端和如今的 web 端。對於您的代碼來講也是這樣，咱們使用 Dart 開發編譯器 (dartdevc) 或 Dart 部署編譯器 (dart2js) 將您的代碼編譯成 JavaScript，這些 JavaScript 代碼能夠託管在服務器上。

因爲 Dart 擁有將 Flutter 框架 (以及開發者的應用代碼) 編譯成 JavaScript 的能力，咱們對 web 的支持工做就變成了用映射 web 平臺 API 的代碼來取代移動應用所使用的底層 C++ 渲染引擎。Flutter 並不會簡單地將 widget 移植爲 HTML 裏的等價組件，Flutter 的 web 引擎爲開發者提供了兩種渲染器: 一個是針對尺寸和兼容性進行優化的 HTML 渲染器，另外一個則是使用 WebAssembly 和 WebGL 經過 Skia 繪圖命令向瀏覽器畫布進行渲染的 CanvasKit 渲染器。

咱們對 Flutter 的要求是，提供一種針對 web 平臺進行開發的新方式，在現有基礎上提供新看法，爲全部人提供更棒的 web 體驗。

發佈生產環境可用的穩定版本

自從 web 支持的測試版 在一年前發佈以來，咱們已經瞭解了不少早期採用者的使用狀況，並已與部分客戶合做，他們如今已經將本身的 Flutter web 應用投入生產。

在此期間，咱們對架構進行了重大改進，增長了一些功能，以便擴展和優化 Flutter 的 web 支持，新增內容主要集中在四個方面: 性能、web 專屬功能、桌面硬件適配，以及插件。

性能

自推出早期版本至今，性能是提高最顯著的。在開發過程當中，咱們對 web 上各類渲染技術的性能和準確性特徵有了更深刻的瞭解。

咱們最先的工做是基於 DOM 的 HTML。在這種渲染模式中，Flutter 的 web 引擎會將每一個生成的 Flutter 場景轉換爲 HTML、CSS 或 Canvas，並以 HTML 元素樹的形式在頁面上渲染爲一幀。雖然 HTML 渲染器可以最大限度地兼容各類瀏覽器，且其代碼體積較小，但 HTML 渲染器的重繪性能不太適合 Rive (使用 Flutter 構建而成，用於建立動態圖像的協做工具) 這種圖形密集型應用。

△ Rive 是一款建立自定義動畫的工具，該團隊已使用 web 版 Flutter 從新構建應用，併發布了測試版

爲了提供高效渲染密集圖形所需的保真度，咱們開始嘗試使用 CanvasKit，它可以使用 WebAssembly 和 WebGL 經過 Skia 繪製命令在瀏覽器中進行渲染。咱們發現 CanvasKit 渲染器的性能、保真度和準確度都更加理想，請看 Flutter 社區中才華橫溢的德國開發者 Felix Blaschke 的 Flutter Plasma 演示——用 CanvasKit 創造的驚豔特效。

△ Flutter Plasma 是由 Felix Blaschke 建立的演示，可在 Safari、Firefox、Edge 和 Chrome 上運行

不一樣的渲染器在不一樣場景下各有優點，所以 Flutter 同時支持如下兩種渲染模式:

• HTML 渲染器: 結合了 HTML 元素、CSS、Canvas 和 SVG。該渲染模式的下載文件體積較小。
• CanvasKit 渲染器: 渲染效果與 Flutter 移動和桌面端徹底一致，性能更好，widget 密度更高，但增長了約 2MB 的下載文件體積。

爲了針對每一個設備的特性優化您的 Flutter web 應用，渲染模式默認設置爲自動。這意味着您的應用將在移動瀏覽器上使用 HTML 渲染器運行，在桌面瀏覽器上使用 CanvasKit 渲染器運行。

您還可使用 --web-renderer html 或 --web-renderer canvaskit 來明確選擇使用何種渲染器。如需瞭解詳細信息，請參閱 官方文檔。

Web 專屬功能

在瀏覽器中運行的 Flutter 應用給人的感受應該像 web 應用同樣。因此咱們爲 Flutter 添加了一些功能，幫助您發揮 web 的優點。

Web 有不少優點，尤爲是在全球的覆蓋率。將您現有的 Flutter 應用帶到 web 上的緣由之一就是接觸應用商店之外的用戶。爲了作到這一點，咱們添加了 自定義 URL 策略，以確保您的用戶只需點擊 URL，就能夠從任何地方訪問您的應用。有了這個功能，您就能夠控制地址欄中顯示的 URL，以及您的應用在 web 上的路由。

△ Flutter Plasma 演示的 Showroom 頁面，實際上就是一個基於 Flutter 自定義 URL 策略的 url_strategy 插件示例

當用戶在 web 上導航時，超連接也相當重要。url_launcher package 中的一個新的 link widget 使用戶可以經過深連接直達您應用內的錨點或外部網站。您能夠在相關的 widget 上使用 link，包括按鈕、內聯文本、圖像，並指定連接是在同一個標籤頁仍是新標籤頁中打開。

對於任何應用來講，文本渲染都是不可或缺的。開發文本佈局系統，是構建 Flutter web 支持所面臨的重大挑戰之一。因爲 web 缺少直接文本佈局 API，Flutter 必須經過觸發 layout() 來對 Parapraph 執行各類測量操做。有時，這些測量的代價至關高昂，因此咱們添加了 基於 Canvas 的文本測量，此測量方式可同時支持純文本與富文本。如今，Flutter 能夠在 web 上高效地完成精細測量，進而完成正確的繪製任務，好比正確地高亮顯示所選文本。

與文本進行交互一樣重要，其重要性不亞於快速準確地渲染文本。經過 SelectableText 和 EditableText widget，您不只能夠選中 Flutter web 應用中的文本，還能夠執行復制粘貼操做。此外，表單文本字段現已支持 自動填充，瀏覽器可以存儲數據以便未來填充使用。

Flutter 2 特別適合實現漸進式 web 應用 (PWA)。咱們建議開發者使用 PWA，經過 Chrome 的 Project Fugu，以安全和可信的方式，彌合移動端和 web 端應用之間的差別。

△ 發票管理應用 Invoice Ninja 推出的 PWA 應用與他們現有的 Flutter 移動應用使用相同的代碼庫

在建立 Flutter Web 應用時，咱們會提供 PWA web 清單文件，以及用來設置 service worker (工做線程) 的代碼。清單文件提供了關於應用應該如何運行的元數據，包括圖標和應用標題等信息。Service workers 能夠實現資源的緩存和應用的離線運行。當您在瀏覽器中以 PWA 的形式運行 Flutter 應用時，您能夠將其做爲移動或桌面應用安裝到您的設備上。

適配各種桌面設備

儘管瀏覽器的形態大小各異，咱們都但願提供美好的 Flutter web 體驗。因爲 Flutter 最初是爲移動應用設計而成，所以 Flutter web 應用已經對移動瀏覽器的手勢和滾動物理效果提供了很好的支持。但桌面瀏覽器 UI 的呈現和使用有所不一樣，因此咱們對 Flutter 進行了相應的更新。

好比，用戶但願應用在桌面瀏覽器中運行時可以顯示滾動條，以便經過鼠標或鍵盤進行控制。咱們爲桌面設備添加了 可自定義的交互式滾動條，這意味着咱們可爲滾動條使用 主題，顯示滾動條軌道，並且還能夠拖動滑塊。咱們還擴展了 PrimaryScrollController，便於用戶 使用鍵盤快捷鍵進行滾動，也省去了您使用自定義滾動視圖的工做。

△ Spica Technologies 爲 Zurich Insurance 構建的物業管理解決方案，這是用 Flutter web 爲商務和桌面設備用戶構建應用的傑出示例

此外，因爲鼠標指針能進行互動的內容密度大於觸摸設備，咱們提高了 默認內容密度。咱們還在框架中添加了支持各類平臺的 系統鼠標光標 合集。

最後，爲讓 Flutter web 支持全部用戶，咱們還擴展了 Flutter 的 web 語義功能來支持 Windows、macOS 和 chromeOS 系統上的無障礙功能。爲了在 web 上實現無障礙體驗，咱們在 RenderObject DOM 樹以外平行生成了一個相似的 DOM 樹，叫 SemanticsNode 樹。SemanticsNode 樹可將標記、操做、標籤和其餘語義屬性轉換成 ARIA 屬性。如今，您能夠經過 Narrator、VoiceOver、TalkBack 或 ChromeVox 屏幕閱讀器來使用 Flutter web 應用。

Flutter web 對插件的支持

最後，咱們爲那些最經常使用的插件帶來了 web 支持，使您可以將本身的 Flutter 應用帶到 web 平臺。藉助 Flutter 插件，您的代碼可與所運行平臺的原生開發庫進行互操做。在 web 上運行 Flutter 應用時，您能夠經過插件訪問現有的 JavaScript 庫。

自測試版發佈以來，咱們在社區的幫助下爲如下插件添加了 web 支持:

• image_picker
• google_maps
• firebase_analytics
• firebase_storage
• connectivity
• cloud_firestore
• cloud_functions
• cross_file

展望將來

幾年前，咱們還沒辦法在 web 上以可接受的質量和性能提供 Flutter。然而，web 新技術的出現和平臺的不斷進步，使咱們得以盡情釋放底層設備的潛力。在支持 web 以後，Flutter 得以涵蓋互聯網上的每一臺設備，讓用戶在全部現代瀏覽器和設備上都能得到一致的體驗。

這個版本的至關一部份內容來自早期 web 用戶的反饋信息和社區提交的 issue，這裏咱們要再次感謝你們的貢獻！從此，咱們的首要目標是快速處理你們的反饋，並及時解決 issue，以便你們專一於在全部目標平臺上發佈高質量的 Flutter 應用。

△ Moi Mobiili 是一家現代移動虛擬網絡運營商，最近使用 Flutter 推出了他們的 web 應用

性能的提高永無止境。咱們的目標是減小代碼體積，提升幀率表現 (fps)。現在，每一個 Flutter web 應用都只會下載它必需的引擎代碼。咱們正在研究緩存部分邏輯的可能性，以減小啓動時間和下載文件體積。咱們最近在 Flutter Gallery 演示應用中嘗試使用延遲庫來減小代碼體積，相信很快就能同你們分享咱們的進展。

在將來幾個月內，咱們還準備繼續完善下列領域:

• 雖然 CanvasKit 很穩定，但還有一些邊界用例存在問題，好比特殊字符的 字體回退，以及對 跨域資源共享 (CORS) 圖像的相應支持等。
• PWA 目前 只緩存了資源的一個子集，徹底的離線支持仍然須要 額外的手動步驟，才能正常適配 CanvasKit。
• 文本渲染和功能，好比對樣式設置較爲複雜的文本的選取，還是咱們要繼續努力解決的功能之一。
• 咱們也會繼續努力改善插件生態系統，讓 Google 發佈的 package 在移動端和 web 端更加統一。

△ Simplebet 經過 Flutter 的 web 支持，在 Fanduel 現有的移動應用套件中構建了高度互動的嵌入式 NFL 和 NBA 投注體驗

即刻開始使用 Flutter web

藉助 Dart 的可移植性、Web 平臺的強大功能，以及 Flutter 框架的靈活性，您如今能夠用同一套代碼庫，構建用於 iOS、Android 以及瀏覽器的應用。

若是您已經開發了 Flutter web 應用，如今就能夠在 穩定渠道 中進行構建。若是您剛開始學習構建 Flutter web 應用，請移步官方文檔訪問咱們的 入門 codelab 課程，以及 Flutter Engage 上的 web 演講。構建 web 應用時，若是您發現了任何問題，請隨時 前往 GitHub 提交給咱們。

咱們很是期待看到您使用 Flutter web 所構建的精彩應用！