Flutter社區

我們的發布重點優先關注在性能、開發者體驗以及 Web 集成上

2021 年 3 月 Flutter Web 支持已進入穩定版，那么，下一步是什么？

我們對用戶研究發現，有超過 10％ 的 Flutter 項目目標是發布到 Web 平臺。因此，目前我們專注于提升初始穩定版本的質量，并使更多的人能夠將 Flutter Web 應用投入生產。

根據 Flutter 每個季度的調查結果，和我們通過 issue、開發者面談、社交媒體渠道中聽取到的信息，我們確立了這些優先事項。我們剛剛收到了第三季度的調查結果，很高興您的反饋和本次計劃不謀而合。

本文提供了詳細的路線圖和每個優先事項相應工作計劃。有些特性可能會跨越幾個季度的時間來完成，使用放大鏡符號 ?? 標識的特性代表它們仍需進一步調查，才能給出一個解決方案。

讓 Flutter 應用在 Web 上表現得自然是一件很重要的事，這包括諸如滾動行為、文本功能、閃屏、超鏈接、搜索引擎優化和其他 Web 應用特有的界面功能。

RTL 文本

此前，Flutter 沒有在 Web 上對從右到左 (RTL) 的語言 (如阿拉伯語和希伯來語) 提供完整的支持。雖然框架本身支持 RTL 文本，但 Web 引擎忽略了 LTR 和 RTL 之間的區別，從而產生了未定義的行為。

近期發布的穩定版 (2.5) 增加了對 RTL 的基礎支持，Flutter Web 應用已經支持了 RTL 語言的所有主要場景。大部分與基礎支持相關的問題已經得到了解決，并且我們正在計劃修復剩余的問題。

• 對文本編輯實現 RTL 支持 (已修復)
• Web 上的 RTL 文本渲染故障 (已修復)
• 帶有 TextDirection.rtl 的 TextField 在 Web 上光標錯位 (計劃)
• 在 RTL 應用程序中，RichText 中的 InlineSpans 重疊了 (已修復)

滾動行為

雖然 Flutter 2 對滾動做出了 一些改進，來支持桌面瀏覽器上的滾動行為 (如滾動條支持)，但在瀏覽器或運行 Web 應用的操作系統上，滾動行為依然在某些情況下沒有達到預期。

雖然其中一些行為依賴于 Flutter 的桌面端支持，但我們計劃在這個路線圖中，解決一些物理滾動屬性和滾動條的問題，問題如下所示。我們還計劃展開對觸控板支持的研究。

• PageScrollPhysics 出現奇怪的行為
• 在 (無限) 列表 Widget 中沒有滾動條
• Mac 桌面的滾動物理應該保持范圍
• 讓滾動條避免阻塞 Sliver 和媒體查詢的內邊距
• MaterialScrollBehavior.buildScrollbar 需要更新

?? 研究對 觸控板的支持

應用加載 API

一些 Web 應用喜歡在應用加載或者提供一些自定義體驗時，顯示閃屏頁、加載指示器或落地頁。眼下，在 Flutter Web 應用內，并沒有顯示正在加載或實現自定義體驗的簡單方法；當用于渲染的 CanvasKit 體積較大時，這將會變成比較棘手的問題。

我們正專注于為應用啟動周期提供一個顯式 API，可以用來預裝應用，控制應用的加載周期，并創建閃屏頁或加載指示器。

• 增加在 Web 上對閃屏頁的支持

無障礙是我們的首要任務之一；我們旨在為您提供必需的工具以構建可訪問的 Web 應用，且應用在最常見的屏幕閱讀器上運行良好。

Flutter 2.2 對無障礙支持進行了極大的改進。從那時開始，我們就聽到了一些終端用戶的擔憂，他們試圖用屏幕閱讀器 (如 JAWS) 來瀏覽他們的 Web 應用。

在該路線圖中，我們將專注于桌面瀏覽器 支持的屏幕閱讀器 的問題，如 snackbar 公告。我們還將繼續研究如何提高我們整體無障礙支持。

• 使用回車鍵時未能觸發按鈕的點擊
• 方向鍵和 B 鍵不更新屏幕閱讀器的焦點

我們將始終優先考慮性能，以改善 Flutter Web 應用的用戶體驗。目前我們的主要目標是改善滾動卡頓，并加快 Web 應用的初始加載速度。

滾動時的卡頓

我們近期的季度調查數據顯示，滾動卡頓是首要的性能問題報告之一。我們的目標是無論在手機上使用手勢，還是在桌面上使用鼠標/鍵盤，都確保 Flutter Web 應用能流暢滾動，但這也取決于 Web 應用期望用戶滾動內容的類型和數量。

在未來幾個月里，我們將專注于改善由于圖像解碼造成的卡頓，我們將繼續研究滾動的性能問題，以找到我們可以改善的其他用例。

• 將圖像解碼轉移到 Web Worker
• 降低 在 CanvasKit 渲染引擎中使平臺視圖的成本

捆綁 CanvasKit (離線支持)

目前，用 CanvasKit 渲染的 Flutter Web 應用需要額外的手動步驟，才能作為漸進式 Web 應用 (PWA) 離線工作。為了在離線模式下完全作為 PWA 工作，并確保應用符合嚴格的內容安全策略，我們需要捆綁 CanvasKit 和備選字體。

我們將首先捆綁 CanvasKit，然后捆綁字體，并添加必要的工具以啟用離線模式。

• CanvasKit 的后端不應該依賴于不穩定的谷歌字體
• 支持捆綁的 CanvasKit 而不是通過 CDN

CanvasKit 的下載大小

CanvasKit 的性能優于基于 DOM 的方法，因此是我們在桌面瀏覽器上的默認渲染器。然而，下載應用所需的時間會影響初始加載性能 (以及在 Web 上運行的 Flutter 應用的 Lighthouse 得分)。

在此路線圖中，我們將研究如何減少 CanvasKit 的下載大小，以努力提高初始加載性能。我們希望確保終端用戶的設備或瀏覽器不會處理大量的有效載荷。

?? 改善 CanvasKit 的下載大小

?? 找到一個大小合適的表情符號備選字體

提升瀏覽器代碼集成的能力，有利于 Web 平臺優勢的發揮。Flutter Web 應用有兩種方式與 HTML 集成。1)在 Flutter Web 應用中使用 HTML 平臺視圖，或 2) 將 Flutter 作為內容集嵌入現有的 Web 應用 (類似于 Web 的附加應用)。目前前者已經可用且需要改進，而后者將是一個新功能，需要進一步設計和開發。

用自定義元素嵌入 (添加到現有應用 add2app)

今天，將 Flutter Web 應用嵌入現有網站 / Web 應用的唯一方法是通過 iframe。雖然這在某些場景下是可行的，但對于那些慢慢將其 Web 應用遷移到 Flutter 的開發者來說，這并不是一個理想解決方案。

在該路線圖中，我們將研究并設計一款定制的解決方案，使您能夠嵌入 Flutter Web 應用，類似于添加到應用的移動場景。

?? 渲染自定義元素內的應用

Flutter 的生態系統包括了用于開發的功能，但目前仍然缺乏 Web 的功能支持，如插件、調試、熱重載等。為了讓您在 Web 端有一個良好的開發者體驗，我們將繼續縮減移動端和 Web 端之間的差距。

相機插件

自最初的 Web 穩定版本發布以來，相機插件一直是呼聲最高的插件之一；許多人發現，在將 Flutter 移動應用引入 Web 時，同步差距是一個主要的問題。

在 Flutter 2.5 穩定版中，我們提供了這個插件的早期版本，可以初始化相機，顯示相機預覽，并拍攝照片。我們收到反饋后將會對這個插件進行改進。

• 為 Web 增加相機支持 (已修復，一些 PR 待定)。

以上是對目前我們在 Web 上路線圖的概述，GitHub 問題列表 依然是我們正在處理的問題來源。我們可能會根據了解到的情況和你的反饋來增加、延長或推遲功能。

我們非常重視您的反饋，并感謝您一如既往的支持。

感謝 flutter.cn 社區成員 (@AlexV525、@Vadaski、@MeandNi) 以及 Lynn 對本文的審校和貢獻。