無限可能 | Flutter 2 重點更新一覽

我們非常高興在本周發佈了 Flutter 2。自 Flutter 1.0 發佈至今已有兩年多的時間,在如此短暫的時間內,我們解決了 24,541 個 issue,合併了來自 765 個貢獻者的 17,039 個 PR。自九月發佈 Flutter 1.22 以來,我們已解決 5,807 個 issue,合併了來自 298 個貢獻者的 4,091 個 PR。在此特別感謝廣大的貢獻者,將業餘時間慷慨地投入到 Flutter 項目的優化中。Flutter 2 的傑出貢獻者有 xu-baolin (貢獻了 46 個 PR)、a14n (貢獻了 32 個 PR;專註於為 Flutter 引入空安全) 和 hamdikahloun (貢獻了 20 個 PR;優化了一系列 Flutter 插件)。然而,為 Flutter 項目做出貢獻的不只有開發者,還有我們負責評審 1,525 個 PR 的眾多 PR 評審員,其中包括 hamdikahloun (身兼數職!)、CareFYazeedAlKhalaf (年僅 16 歲!) 等人。Flutter 是真正的社區合力之作,如果沒有問題反饋者、PR 貢獻者和代碼評審員,版本 2 便無法問世,是你們帶來了這一新版本。

Flutter 2 的發佈也帶來了許多振奮人心的內容。您可以閱讀圖文《Flutter 2 正式發佈!》,快速了解 Flutter 2 和 Dart 2.12 中的新增功能,以及我們的客戶及合作夥伴是如何使用 Flutter 2 的。我們將在下周的圖文中為大家詳細介紹如何在生產環境中使用 Flutter web 穩定版 並發揮其優勢。

下面我們一起來詳細了解下 Flutter 2 的新增功能吧!

Web

從現在開始,Flutter web 的支持已經從 Beta 版過渡到穩定階段。隨着首個穩定版本的發佈,Flutter 通過對 web 平台的支持,將代碼的復用性提升到了一個新高度。現在,當您平穩運行 Flutter 應用時,可以將 web 作為一個新的適配方向。

作為一家致力於通過數字化實現卓越運營的現代移動虛擬網絡運營商,Moi Mobiili 選擇使用 Flutter 構建其 Mun Moi 客戶經理應用,並在近期發佈了其 web 版應用。

藉助 web 平台的諸多優勢,Flutter 為構建豐富的交互式 web 應用奠定了基礎。我們的首要重點是提升性能並優化渲染。除了 HTML 渲染引擎外,我們還新增了一個基於 CanvasKit 的渲染引擎,以及一些如 Link Widget 等特定於 web 的功能,以確保您的應用能夠像 web 應用一樣在瀏覽器中穩定運行。

有關此 Flutter web 穩定版 的更多詳情,請參閱 Flutter web 發佈文章:

空安全

健全的空安全是對 Dart 語言的重要補充,它通過區分可空類型和不可空類型來進一步加強類型系統。這使開發者能夠防止 null error 崩潰,這也是導致應用崩潰的常見原因。通過將空檢查合併到類型系統中,可以在開發期間捕獲這些錯誤,從而防止生產環境中的崩潰。在包含 Dart 2.12 的 Flutter 2 中,健全的空安全得到了充分的支持。要了解更多細節,請參閱 Dart 2.12 發佈文章:

pub.dev 已經發佈了 超過 1,000 個空安全 package,包括來自 DartFlutterFirebaseMaterial 團隊發佈的數百個 package。如果您也是 package 的作者,請參閱 遷移指南 並着手遷移事項。

桌面設備

在新版本中,Flutter 對桌面設備的支持已經進入穩定版本的前期準備階段。也就是說,您現在可以嘗試將其作為您 Flutter 應用的部署目標: 把它看作最終穩定版發佈前的預覽,最終穩定版本將於今年晚些時候發佈。

Flutter 桌面版經過一系列大大小小的優化,才達到現在的質量。我們率先從文本編輯入手,確保其在每個支持平台上都能令 文本選擇點 等基本功能獲得如原生般的順暢運行體驗,並能夠 在鍵盤事件經過處理後將其取消。在鼠標輸入方面,我們也已確保,當處理觸摸輸入以及在 MaterialCupertino 設計語言的 TextField 和 TextFormField 中添加內置上下文菜單,並 在 ReorderableListView 上提供抓取控點 時,使用高精度定點設備的拖放事件將立即開始,沒有任何延遲。另外,內置的上下文菜單已經添加至以 Material 和 Cupertino 為設計語言的 TextField 及 TextFormField widget 中,ReorderableListView widget 添加了抓取控點功能。

ReorderableListView 現已支持抓取控點,便於鼠標輕鬆拖動

開發者可以使用 ReorderableListView 輕鬆移動項目,但用戶需要長按項目以啟用拖動操作。該設計在移動設備上很合理,但很少有桌面平台的用戶會想到用鼠標長按某個項目來移動它,所以新版本提供了一個適用於鼠標或觸摸輸入的抓取控點。按照同樣的思路,對於因平台而異的慣用功能,新版本提供了一個 經過升級的滾動條,可使其與桌面平台完美適配。

新版本中的滾動條 widget 已適配桌面平台

更新後的 Scrollbar Widget 為桌面平台提供了預期的相同交互功能,例如支持拇指拖動、點擊滾動條空白區域進行上下翻頁,以及將鼠標懸停在滾動條的任何部位以顯示一個軌道等。此外,由於滾動條可以通過 新增的 ScrollbarTheme 類設定主題,您可以根據您的應用對其外觀和感覺進行個性化設計。

對於其他桌面平台的特定功能,本版本還為 Flutter 應用啟用了命令行參數處理,這樣一來,您可以通過在 Windows 文件資源管理器中雙擊鼠標等簡單操作來打開應用中的文件。此外,我們還努力使 WindowsmacOS 上的大小調整操作變得更加流暢,並面向全球用戶推出了輸入法 (IME) 支持。

Flutter 桌面現支持輸入法直接輸入

我們還提供了更新的 文檔,以指導您做好準備,將應用部署到相應的操作系統商店中。您不妨參考一下,如發現有任何遺漏,請反饋給我們。

試用 Flutter 桌面 Beta 版時,您可以按需切換到 beta 渠道來進行訪問,並按照 Flutter 文檔上的說明 設置目標平台的配置標記。此外,我們還在穩定渠道中新增了 Beta 版的快照。當您使用 “flutter config” 啟用其中一個桌面配置設置 (如 enable-macos-desktop 時),您可以直接嘗試使用桌面 Beta 版功能,而無需再經歷前往 Beta 渠道、獲取完整的 Beta 版及構建工具等漫長的過程。您不妨親自嘗試一下,或把桌面支持作為一個簡單的 “Flutter 模擬器”,非常好用。

然而,如果您選擇繼續通過穩定渠道使用桌面 Beta 版,那麼您將無法像切換到 Beta 或開發渠道時那樣快速獲取新功能或錯誤修復,因此,如果您以 Windows、macOS 或 Linux 為明確目標,我們建議您切換到更新速度更快的渠道。

在開發穩定版 Flutter 桌面支持過程中,我們深知未來還有很多工作要做,包括支持原生頂級菜單集成、提供如同獨立平台一樣的文本編輯體驗和無障礙功能支持,以及一般漏洞修復和性能增強。如果您認為桌面平台在投入生產之前仍然有一些地方需要完善,望 不吝賜教

平台自適應應用示例: Flutter Folio

現在 Flutter 已可在三個平台 (Android、iOS 和 web) 上為生產環境的應用提供支持,還有三個平台仍處於測試階段 (Windows、macOS 和 Linux),那麼問題來了: 如何開發一款應用,可以良好適應多種不同屏幕規格 (大、中、小屏幕)、不同輸入模式 (觸控、鍵盤和鼠標) 和不同慣用設備 (移動、web 和桌面)?為了給自己以及各地的廣大 Flutter 開發者解決這個問題,Flutter Folio 應用應運而生

您可將 Folio 視作一個簡單的示例應用,幫助您在多個平台上利用單一代碼庫良好地運行應用。”良好運行” 是指它能在大、中、小屏幕上正常顯示,並能利用觸控、鍵盤和鼠標輸入,還可適應不同平台的風格,例如使用 web 上的鏈接、使用桌面設備上的菜單等等。我們將此類應用稱為 “平台自適應應用”,因為這類應用能良好地適應所運行的任何平台。

如需查看如何使應用自適應平台,請參閱 Folio 的源代碼。未來,希望能有更為深入地探討此主題的文檔和 codelabs 出現。您還可以閱讀和觀看 Aloïs Deniel 關於該主題的 博文和視頻

Google Mobile Ads 發佈 Beta 版

除了發佈 Flutter 桌面 Beta 版外,我們也非常高興地發佈了 Google Mobile Ads SDK for Flutter 的公開 Beta 版。這是一個全新插件,除了原有的疊加格式 (疊加橫幅、插頁和激勵視頻廣告),我們還在其中新增了內聯橫幅及原生廣告。另外,我們還在此插件中提供了 Ad Manager 和 Admob 支持,無論您是何種規模的發佈商,這款插件都能滿足您的需求。

在公開發佈 Beta 之前,我們邀請了一些客戶參與試用這款插件。許多客戶都使用了這些新增的廣告格式成功地發佈了應用。例如,Sua Musica (拉丁美洲最大的獨立藝術家音樂平台,擁有超過 15,000 位認證音樂人和一千萬活躍用戶) 使用了 Google Mobile Ads SDK for Flutter 插件發佈了新的應用。其廣告展示量增加了 350%,點擊率增加了 43%,千次展示收益上漲了 13%。

您此刻就可使用該 插件 了。在剛結束的 Flutter Engage 上,Andrew 和 Zoey 圍繞《如何通過 Flutter 應用獲利》介紹了一些 Flutter 應用創收策略,以及如何在 Flutter 應用中加載廣告,您可以查看下方視頻了解詳細內容。此外,我們在 flutter.dev 上創建了一個新的 Ads 頁面,方便您查找所需資源,如 插件使用指南內聯橫幅和原生廣告 codelab,以及疊加橫幅,插頁和激勵視頻廣告 codelab,歡迎您隨時查看。更多信息請查看 如何通過 Flutter 應用獲利 視頻。

新增 iOS 功能

在不斷提高對其他平台支持的同時,我們並沒有將 iOS 拋諸腦後。事實上,新版本提供了 178 個與 iOS 相關的合併 PR,其中包括將狀態恢復 (State Restoration) 引入 iOS 的 23495,應開發者需求——不用打開 Xcode 就可以直接從命令行建立 IPA 的 67781,以及更新 CocoaPods 版本以配合最新工具的 69809。此外,我們還在 Cupertino 設計語言實現中添加了一些 iOS 小部件。

新增的 CupertinoSearchTextField 為 iOS 提供了搜索欄 UI。

CupertinoFormSectionCupertinoFormRowCupertinoTextFormFieldRow 等 widgets 則利用 iOS 的視覺美學簡化了驗證表單字段的生成。

除了為 iOS 新增功能以外,我們也在持續尋求 iOS 和 Flutter 在着色器和動畫方面的 整體性能優化。iOS 仍然是 Flutter 的首要平台,我們將繼續致力於為大家帶來重要的新功能和性能提升。

新增 Widget: Autocomplete 和 ScaffoldMessenger

新版 Flutter 新增了兩個 Widget,分別是 AutocompleteCore 和 ScaffoldMessenger。AutocompleteCore 是在您的 Flutter 應用中實現自動補全功能所需的基礎功能。

開發者對為 Flutter 增加 Autocomplete 功能的呼聲很高,所以我們在新版本中提供了此功能。您現在即可使用,如果您想了解該功能的設計理念,請參閱 設計文檔

同樣,ScaffoldMessenger 可用於處理許多與消息提示 Snackbar 相關的問題,例如,它可以輕鬆創建 Snackbar 消息以響應 AppBar 操作、創建可在 Scaffold 轉換之間持久保存的 Snackbar 消息,並能夠在異步操作完成時顯示 Snackbar 消息,即使用戶已導航至使用不同 Scaffold 的頁面時也不例外。

您只需寫一行代碼,即可將所有這些更加便捷的新功能收入囊中。從現在開始,您可以使用此行代碼來顯示您的 Snackbar 消息:

final messenger = ScaffoldMessenger.of(context);
messenger.showSnackBar(SnackBar(content: Text(『I can fly.』)));

如您所想,其中原理不止於此,您可以觀看 Kate Lovett 發佈的 關於 ScaffoldMessenger 的精彩視頻 了解詳情。

通過 “添加到應用” 功能創建多個 Flutter

在和許多 Flutter 開發者聊天的過程中,我們得知大多數人並非是從零開發一個全新應用,而是會通過將 Flutter 添加到現有的 iOS 和 Android 應用中來進行使用。我們將此功能稱為 混合編程 (Add-to-App),您可以通過這種方法,在保留現有原生代碼庫的同時,在兩個移動平台間重複使用 Flutter 代碼。然而,我們有時聽到採用此方法的開發者們表示,他們不知如何擺脫只能將第一個畫面集成到 Flutter 的限制。Flutter 和原生頁面交織導致導航狀態難以維護,而且在視圖級別集成多個 Flutter 會佔用大量內存。

過去,額外 Flutter 實例的內存佔用量與第一個 Flutter 實例相同。在 Flutter 2 中,我們將創建額外 Flutter 引擎的靜態內存佔用量降低了約 99%,使每個實例的佔用量大約為 180kB。

提供該支持的新增 API 目前尚處於預覽狀態,在 我們的文檔里,您可以找到通過使用這種新模式的說明和 示例項目。隨着這一變化的出現,我們強烈建議您在原生應用中創建多個 Flutter 引擎實例。

Flutter Fix

當任何成熟的框架聚集了擁有龐大代碼庫的用戶時,我們往往需要避免對框架 API 進行任何更改,以避免破壞日益增多的代碼。隨着超過 50 萬的 Flutter 開發者分佈在越來越多的平台,Flutter 2 很快就會踏入這一行列。然而,隨着時間的推移,為了持續改進 Flutter,我們希望能夠對 API 進行重大更改。現在的問題是,如何在不影響開發者的前提下繼續改進 Flutter API。

我們為此推出了 Flutter Fix

Flutter Fix 是一系列功能的組合。首先,我們為 dart 命令行工具新增了一個名為 “dart fix” 的命令行選項,您可藉此尋找棄用 API 列表的所在位置,並了解如何更新調用這些 API 的代碼。其次,Flutter Fix 本身就是個列表,自版本 2 開始便與 Flutter SDK 綁定。另外,Flutter Fix 也是一組針對 Visual Studio Code、IntelliJ 和 Android Studio IDE 的新 Flutter 擴展程序,您可藉此找到已棄用 API 的相同列表,單擊鼠標,輕點旁邊的小燈泡圖標即可更改代碼,完成快速修復。

舉個例子,比如您的應用具有下面一行代碼:

使用已棄用的函數創建 Flutter widget

因為這個函數已經棄用,請使用下面的參數代替:

替換已棄用的函數並創建 Flutter widget

即使您熟悉和了解很多 Flutter 中已棄用的內容,代碼中需要修改的內容越多,就越難修復所有的內容,也就越容易出現錯誤。人類並不擅長這種重複性的工作,但計算機不一樣。通過下面的命令,您可以看到我們如何在您的整個項目中進行問題修復:

$ dart fix --dry-run

如想批量應用它們,您亦可以通過以下代碼輕鬆實現:

$ dart fix --apply

或者,如果您希望以交互方式在您喜歡的 IDE 中應用這些修復,也可以實現。

多年來,我們一直在標記已棄用的舊 API,現在我們制定了一個策略,明確 何時真正移除棄用的 API,而我們率先將其應用到了 Flutter 2 之中。儘管我們尚未捕捉到所有棄用 API,並將其以數據形式提供給 Flutter Fix,但我們會不斷從之前棄用的 API 中獲取更多內容,並在未來持續加入新的重大更改。我們的目標是盡全力將 Flutter API 打造的盡善盡美,同時保持代碼的及時更新。

Flutter DevTools

為了明確 DevTools 是用於調試 Flutter 應用的工具,現在我們已將其命名為 Flutter DevTools。此外,我們還做了很多工作,讓其可以成為與 Flutter 2 成熟度與質量相匹配的版本。

其中有一個新功能,可在您尚未啟動 Flutter DevTools 2 時幫您鎖定問題,那就是您的 IDE 能夠發現常見的異常,並在 DevTools 中提出這個異常,以助您開展調試。例如,下面顯示您的應用中拋出了一個溢出異常,系統在 Visual Studio Code 中提供了一個在 DevTools 中調試此問題的選項。

Flutter IDE 擴展的溢出異常提示通知

按下該按鈕,您即可利用 DevTools 中的 Flutter Inspector 檢查引發問題的 Widget,以便進行修復。我們今天的操作只是為了解決溢出異常,但這種處理方法適用於 DevTools 可以解決的各種常見異常。

在 DevTools 開始運行後,您可通過標籤上的新錯誤標識幫助自己追蹤應用中出現的具體問題。

DevTools 中的紅點可以幫助提醒應用中存在的錯誤部分

DevTools 的另一個新功能是能夠輕鬆發現所顯示的分辨率低於其實際分辨率的圖像,這有助於追蹤應用過大和內存佔用過多等情況。若要啟用此功能,請在 Flutter Inspector 中啟用 Invert Oversized Images。

啟用 “反轉超大尺寸圖像 (Invert Oversized Images)” 選項,以突出顯示異常圖像

現在,當圖像的實際分辨率明顯大於其顯示大小時,系統就會將其倒置,以便您在應用中輕鬆找到它。

“反轉超大圖像” 的操作示例

此外,為響應大量用戶的要求,除了在 Flutter Inspector 的 Layout Explorer 中顯示有關彈性布局的詳細信息外,我們還添加了顯示固定布局的功能,可便於您調試各種布局。

新的 Layout Explorer 顯示了 fixed 和 flex layout 的布局細節

其功能還遠不止如此。以下是對 Flutter DevTools 2 其他一些新增功能的總結:

  • 為 Flutter 幀圖添加了平均 FPS 信息和易用性改進
  • 用紅色的錯誤標籤在網絡分析器中調用失敗的網絡請求
  • 新的內存視圖圖表更快、更小、更簡單易用,其中包含用於在特定時間描述活動的懸浮卡片
  • 在 “Logging (日誌庫)” 選項卡中新增了搜索和篩選功能
  • 從 DevTools 啟動之前開始跟蹤日誌,以便在啟動後可以看到完整的日誌記錄
  • 將 “Performance” 視圖重命名為 “CPU Profiler”,以便更清楚地表示其功能
  • 為 CPU Profiler 幀圖添加了時間網格
  • 將 “Timeline” 視圖重命名為 “Performance”,以便更清楚地表示其功能

當然這並不是全部。想了解所有相關更改,建議您查閱下列公告:

Android Studio/IntelliJ Extension

我們也為 IntelliJ 系列 IDE 的 Flutter 插件添加了一些適用於 Flutter 2 的新功能。首先,我們在其中新增了一個項目嚮導,該嚮導與 IntelliJ 中的新嚮導風格一致。

此外,如果您正在 Linux 上使用 IntelliJ 或 Android Studio,針對 安裝自 Snap Store 的 Flutter SDK 進行編程,那麼系統便會將 Flutter snap 路徑添加到已知的 SDK 路徑列表中。這使得 Flutter snap 用戶可以更輕鬆地在 “Settings (設置)” 中配置 Flutter SDK。感謝 Marcus Tomlinson 對此作出的貢獻!

通過 Snap 安裝 Flutter SDK,可以更輕鬆的在 Linux 上使用 Android Studio

您可以從最近更新公告中了解更多有用信息:

Visual Studio Code 擴展

適用於 Visual Studio Code 的 Flutter 擴展也針對 Flutter 2 進行了優化,我們首先引入了一些測試增強功能,例如重新運行失敗測試的能力。

經過兩年的逐步發展,對 Dart 的 LSP (語言服務器協議) 支持已經成為在 Flutter 擴展中將 Dart 分析器集成到 Visual Studio Code 中的默認方式。LSP 支持為 Flutter 開發帶來了許多改進,包括在當前的 Dart 文件中應用特定的所有修復,以及能夠補全代碼以生成完整函數調用 (包括括號和所需參數) 的能力。

LSP 支持不僅限於 Dart,它還支持 pubspec.yaml 及 analysis_options.yaml 文件中的代碼補全。

這僅僅是近期 Visual Studio Code 適用於 Flutter 的部分擴展更新。您可以閱讀下列公告,了解全部更新內容:

DartPad 升級到支持 Flutter 2

如果不提 DartPad,那我們的工具更新就不能算完整,DartPad 現已更新並支持 Flutter 2。

DartPad 已經升級到支持 Flutter 2 了

現在,無需離開喜歡的瀏覽器,您就可以體驗新的 Flutter 空安全版本。

生態系統更新

Flutter 開發體驗不僅包括框架和工具;還包括為 Flutter 應用提供的各種軟件包和插件。自上一次 Flutter 穩定版本發佈以來,這方面也發生了很多變化。例如,我們已在攝像頭和視頻播放器插件之間合併了將近 30 個 PR,從而大大提高了兩者的質量。如果您在過去使用這兩種產品時曾遇到過問題,那麼您應該再嘗試一次,您會發現它們比以前更加強大。

另外,如果您是 Firebase 用戶,我非常高興地宣布熱門插件的產品質量已經得到了提高並可投入生產,同時我們還為這些插件提供了空安全支持以及針對 Android、iOS、web 和 macOS 的 全套參考文檔和常用教程。這些插件包括:

  • Core
  • Authentication
  • Cloud Firestore
  • Cloud Functions
  • Cloud Messaging
  • Cloud Storage
  • Crashlytics

如果您正在尋找應用的崩潰報告,您可以考慮使用 Sentry,其已經發佈了 適用於 Flutter 應用的新 SDK

Sentry 崩潰報告工具已經支持 Flutter

Sentry 崩潰報告工具已經支持 Flutter

在 Flutter 應用中使用 Sentry 的 SDK,您可以在 Android、iOS 或原生平台上發生錯誤時收到實時通知。查閱 Sentry 文檔 了解更多詳細信息。

另外,如果您尚未了解過 Flutter 社區中的 “Plus” 插件,您也可着手嘗試。Flutter 團隊最初開發的許多熱門插件均由此衍生而來,我們已在 Plus 插件中添加了空安全支持和對其它平台的支持,並已着手開始解決 flutter/plugins 庫中的相應問題。這些插件包括:

  • Android Alarm+
  • Android Intent+
  • Battery+
  • Connectivity+
  • Device Info+
  • Network Info+
  • Package Info+
  • Sensors+
  • Share+

目前,與 Flutter 兼容的 package 和插件數量超過 15,000 個,這會讓人很難找到那些值得優先考慮的軟件包和插件。因此,我們發佈了 Pub 分值 (靜態分析評分)、人氣排名、喜愛度,若軟件包質量出眾,我們會為其打上 “Flutter Favorite” 的特殊標記。為與 Flutter 2 適配,我們已在 Favorite 列表中添加了幾個新軟件包:

  • animated_text_kit
  • bottom_navy_bar
  • chopper
  • font_awesome_flutter
  • flutter_local_notifications
  • just_audio

祝賀這些軟件包的作者!如果您尚未了解這些軟件包或 列表中的其它軟件包,建議您着手開始了解。

最後同樣也是很重要的一點,如果軟件包作者或用戶有興趣了解最新版本的軟件包是否適用於最新版本的 Flutter,可以查看 Codemagic 的新 pub.green 網站以了解詳情。

Codemagic 發佈了一個網站 pub.green 用來展示 package 和近期 Flutter 版本的兼容性結果

您可在 pub.green 網站上測試 pub.dev 上可用的 Flutter 和 Dart 軟件與不同 Flutter 版本的兼容性。了解更多信息,推薦查閱 CodeMagic 團隊的公告博文

重大變更

我們為 Flutter 2 做了如下重大變更,您可利用 “dart fix” 命令自動緩解其中的許多內容:

總結

最後,我想代表 Google Flutter 團隊全體成員向開發者們說一句謝謝!感謝你們在過去的兩年里推出了超過 15 萬款 Flutter 應用,我們整理了一些團隊喜歡的 Flutter 應用,在 Flutter Engage 主題演講 上播放了這段視頻,獻給各位開發者和社區。

如果沒有各位開發者們對自己構建的 Flutter 應用的持續支持和熱忱,這個具備全球活力的開發者社區就不可能成為現實,我們非常期待看到您接下來的作品!

與您共同致力於更美好的 Flutter 社區!

Tags: