【譯】Flutter 2 正式版的新功能,一睹為快

戀貓de小郭 發表於 2021-03-04

今天很高興地宣佈 Flutter 2 的釋出,距離Flutter 1.0 的釋出已經兩年多了,但是在很短的時間內, Flutter 已經關閉了 24,541 issues,併合並了 765 個貢獻者的 17,039個PR。

自去年9月 Flutter 1.22 釋出以來,Flutter 已經關閉了 5807 issues 併合並了 298位貢獻者的 4091 個PR。

Web

截止到今天,Flutter 的 Web 支援已經從 Beta 過渡到穩定 Channel 。在此初始穩定版本中,Flutter 在 Web 平臺下將程式碼的可重用性提高到另一個層次,因此現在當開發者建立Flutter 應用程式時,Web 只是該應用程式的另一個可支援的目標裝置。

【譯】Flutter 2 正式版的新功能,一睹為快

通過利用 Web 平臺的眾多優勢,Flutter 為構建豐富的互動式Web應用程式奠定了基礎,Flutter 主要專注於效能和渲染保真度的改進,除了 HTML renderer 之外,我們還新增了一個新的基於 CanvasKit 的渲染器,另外我們還新增了特定於 Web 的功能,例如 Link Widget 以確保在瀏覽器中執行的應用感覺像Web應用。

你可以在Flutter的 Web 支援部落格文章中找到有關此穩定版本的更多詳細資訊: medium.com/flutter/web…

Sound Null Safety

空安全宣告是 Dart 語言的重要補充,它通過區分可空型別和非可空型別進一步增強了型別系統,這使開發人員能夠防止 null 錯誤崩潰。

通過將空檢查合併到型別系統中,開發者可以在開發過程中捕獲這些錯誤,從而防止生產崩潰。從 Flutter 2 開始,包含 Dart 2.12 的穩定版完全支援空安全宣告。

有關更多詳細資訊,請參見 Dart 2.12部落格文章:https://medium.com/dartlang/announcing-dart-2-12-499a6e689c87

pub.dev 包儲存庫已經發布了 1,000 多個空安全軟體包,其中包括 Dart,Flutter,Firebase 和 Material 團隊的數百個軟體包。

如果你是軟體包作者,請檢視遷移指南並考慮立即進行遷移: dart.dev/null-safety…

Desktop

在此版本中,Flutter的桌面支援已經發布在穩定 Channel,這意味著 Flutter 已經準備好讓你嘗試一下使用它開發桌面應用,當然你可以將其視為“beta snapshot”,以預覽將於今年晚些時候釋出的最終穩定版本。

PS :所以這是為了趕 KPI 才釋出的麼?

為了使 Flutter 桌面達到釋出的質量,Flutter 從大小上進行了改進,從確保文字編輯像在每個受支援的平臺上的原生體驗一樣開始,包括諸如:text selection pivot points以及 a keyboard event once it’s been handled的能力。

在處理完鍵盤事件後,在滑鼠輸入端現在可以立即開始使用高精度定點裝置進行拖動,而不必等待處理觸控輸入時所需的延遲。

此外內建的上下文選單已新增到 Materia l和 Cupertino 設計語言的 TextFieldTextFormField 控制元件中。

最後,grab handles have been added 已經被新增到 ReorderableListView 控制元件中。

【譯】Flutter 2 正式版的新功能,一睹為快

ReorderableListView 現在具有可拖住的功能,可通過滑鼠輕鬆拖放, 在移動專案中 ReorderableListView 要求使用者長按才能啟動拖動,這哥場景在移動裝置上適用,但是很少有桌上型電腦使用者會想到用滑鼠長按某個專案來移動它,因此此版本還包括適用於滑鼠或觸控輸入的移動方式。另外常用功能的另一項改進是更新的滾動條,該滾動條可以正確顯示桌面形狀因素。

【譯】Flutter 2 正式版的新功能,一睹為快

此版本還包括一個更新的 Scrollbar 控制元件,該控制元件在桌面環境中非常使用,包括拖動預覽、單擊軌道以上下滾動頁面以及在滑鼠懸停在滑鼠的任何部分上時顯示軌道的功能。

此外由於 Scrollbar 是使用新 ScrollbarTheme 主題,因此開發者可以設定其樣式以使其與應用程式的外觀和風格相匹配。

對於其他特定於桌面的功能,此版本還啟用了 Flutter 應用程式的命令列引數處理功能,以便可以使用諸如 Windows File Explorer 中的檔案雙擊之類的簡單操作來開啟應用程式中的檔案。

另外 Flutter 在致力於在應用在 Windows 和 macOS 的上調整大小變得更加流暢,併為國際使用者啟用IME(輸入法編輯器)。

【譯】Flutter 2 正式版的新功能,一睹為快

此外,我們還提供了更新的文件,介紹了開始準備將桌面應用程式部署到特定作業系統商店時需要執行的操作。https://flutter.dev/desktop#distribution

在嘗試使用 Flutter 桌面 Beta 時,開發者可以通過按預期方式切換到 Beta 通道並根據flutter.dev 上的指導為目標平臺設定配置標誌來訪問它。此外,我們還製作了穩定通道上可用的 beta 快照。

如果開發者使用 flutter config 啟用某個桌面配置設定(例如 enable-macos-desktop),則可以嘗試桌面支援的 beta 功能,而不必經歷漫長的過程如刪除 Flutter SDK 後才能轉移到 beta 頻道等,這非常適合嘗試一下或將桌面支援用作簡單的 “Flutter Emulator.”。

但是,如果您選擇停留在 Stable Channel 上以訪問桌面 Beta,則不會像切換到Beta或dev頻道那樣快地獲得新功能或錯誤修復,因此如果你正在積極地針對 Windows,macOS 或 Linux,我們建議您切換到可更快提供更新的渠道。

當 Flutter 桌面的第一個完整的生產版本快完全釋出時,我們知道還有更多工作要做,包括對與本機頂級選單整合的支援,更接近各個平臺的文字編輯體驗以及可訪問性支援,以及常規的

New iOS features

此版本帶來了與 iOS 相關的178個PR合併,包括 #23495(將狀態恢復帶到iOS),#67781(它滿足了長期存在的直接從命令列構建IPA而無需開啟Xcode的要求),以及 #69809,更新了CocoaPods版本以匹配最新工具。

此外,Cupertino 設計語言實現中還新增了一些 iOS 控制元件,如新的CupertinoSearchTextField 提供了 iOS 搜尋欄 UI。

【譯】Flutter 2 正式版的新功能,一睹為快

CupertinoFormSectionCupertinoFormRowCupertinoTextFormFieldRow 控制元件更容易滿足 iOS 的設計風格。

【譯】Flutter 2 正式版的新功能,一睹為快

除了適用於iOS的功能外,在著色器和動畫方面,我們還將繼續 iOS 和 Flutter 的效能改進,iOS仍然是 Flutter 的主要平臺,我們將繼續努力帶來重要的新功能和效能改進。

New widgets: Autocomplete and ScaffoldMessenger

此版本的 Flutter 附帶了兩個新控制元件: AutocompleteCoreScaffoldMessenger

AutocompleteCore 表示將自動完成功能納入 Flutter 應用程式所需的基本 功能。

【譯】Flutter 2 正式版的新功能,一睹為快

自動完成是 Flutter 經常需要的功能,如果對完整功能的設計感到好奇,請檢視自動完成設計文件。 docs.google.com/document/d/…

ScaffoldMessenger 用來處理許多與 SnackBar 相關的問題,包括能夠輕鬆建立SnackBar 以響應 AppBar 動作;建立 SnackBars 以在 Scaffold 過渡之間持久存在的能力;能夠在 SnackBars 完成時顯示 SnackBars的能力,即使使用者已導航到具有其他 Scaffold 的頁面,也將執行非同步操作。

【譯】Flutter 2 正式版的新功能,一睹為快

所有這些優點可以從現在開始使用幾行程式碼來顯示 SnackBars :

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

複製程式碼

Multiple Flutter instances with Add-to-App

從與許多 Flutter 開發人員的交談中我們瞭解到,許多人沒有使用 Flutter 開發全新應用程式的想法,但他們可以通過將 Flutter 新增到現有的 iOS 和 Android 應用程式中來利用 Flutter。

此功能稱為 Add-to-App,是在兩個移動平臺上重用 Flutter 程式碼同時仍保留現有本機程式碼庫的絕佳方法。但是在此之前我們有時會聽到,不清楚如何將第一個頁面整合到 Flutter 中。

將 Flutter 和本機交織在一起會使得導航狀態難以維護,並且在檢視級別整合多個 Flutter 會佔用大量記憶體。

過去其他 Flutter 例項的儲存成本與第一個例項相同,在Flutter 2 中,我們將建立額外的Flutter 引擎的靜態記憶體成本降低了約 99%,每個例項約為 180kB。

【譯】Flutter 2 正式版的新功能,一睹為快

支援此功能的新 API 可以在 beta 通道上預覽,並在 flutter.dev 上記錄了一系列演示此新模式的示例專案,通過此更改,我們不再猶豫建議在本機應用程式中建立Flutter引擎的多個例項。

Flutter Fix

每當任何框架成熟並使用越來越多的程式碼庫聚集使用者時,隨著時間的推移,趨勢就是避免對框架API進行任何更改,以避免破壞越來越多的程式碼行。

Flutter 2 擁有超過 500,000 個Flutter開發人員,涉及的平臺數量越來越多,因此它很快就面臨了這樣的問題。但是為了使我們能夠隨著時間的推移不斷改進 Flutter,我們希望能夠對 API 進行重大更改。問題是如何在不中斷開發人員的情況下繼續改進Flutter API?

我們的答案是 Flutter Fix:(http://flutter.dev/docs/development/tools/flutter-fix)

Flutter Fix 是事物的組合。首先,dartCLI 工具有一個新的命令列選項,名為 dart fix ,它知道在哪裡可以查詢已棄用的 API 列表以及如何使用這些 API 更新程式碼。其次它是可用修補程式本身的列表,最後它是針對 VS Code,IntelliJ 和 Android Studio IDE 的更新的 Flutter 擴充套件集,它們知道哪些改變是屬於公開相同的內容,展示可用的修復程式列表,如帶小劃線的快速修復程式,可幫助您單擊滑鼠來更改程式碼。

舉例來說,假設您的應用中包含以下程式碼行:

【譯】Flutter 2 正式版的新功能,一睹為快

由於不推薦使用此建構函式的引數,因此應將其替換為以下內容:

【譯】Flutter 2 正式版的新功能,一睹為快

即使你熟悉的 Flutter 中所有被棄用的內容,但在程式碼中必須進行的更改數量也就越大,應用所有修補程式的難度就越大,並且更容易出錯。

人類在這類重複性任務上並不擅長。但是計算機很擅長;通過執行以下命令,就可以看到我們如何在整個專案中進行的所有修復:

$ dart fix --dry-run
複製程式碼

如果您想批量應用它們,可以輕鬆地這樣做:

 dart fix --apply
複製程式碼

或者,如果您想在自己喜歡的IDE中以互動方式應用這些修補程式,也可以這樣做:

【譯】Flutter 2 正式版的新功能,一睹為快

多年來我們一直在將舊的API標記為已棄用,但是現在有了關於何時刪除實際已棄用的API的政策,Flutter 2 是我們第一次這樣做。

即使我們尚未捕獲所有已棄用的API作為資料來提供 Flutter Fix,但我們仍將繼續從先前已棄用的 API 中新增更多資訊,並將在未來的重大更改中繼續這樣做。

我們的目標是盡最大努力使 Flutter 的 API 達到最佳狀態,同時還要使您的程式碼保持最新。

Flutter DevTools

為了清楚說明 DevTools 是用於除錯Flutter應用程式的工具,我們在除錯 Flutter 應用程式時將其重新命名為 Flutter DevTools 。此外我們還做了很多工作,以使其達到 Flutter 2的生產質量。

在您啟動 DevTools 之前也可以幫助開發者解決問題的新功能是:Android Studio,IntelliJ 或 Visual Studio Code 能夠在出現常見異常時發出通知,並提供將其引入DevTools 中以幫助您除錯的功能它。

例如,以下內容顯示您的應用程式中已引發溢位異常,該異常會在 Visual Studio Code 中彈出一個選項,用於除錯DevTools中的問題。

【譯】Flutter 2 正式版的新功能,一睹為快

按下該按鈕可開啟出現問題控制元件上的 DevTools 中的 Flutter Inspector,因此可以對其進行修復。

今天我們僅針對佈局溢位異常執行此操作,但我們的計劃是針對所有常見異常提供這種處理,DevTools可以解決這些異常。

一旦執行了 DevTools,選項卡上的新錯誤標記將幫助開發者跟蹤應用程式中的特定問題。

【譯】Flutter 2 正式版的新功能,一睹為快

DevTools 的另一個新功能是能夠輕鬆檢視解析度比顯示的影像高的影像,這有助於跟蹤過多的應用程式大小和記憶體使用情況。要啟用此功能,請在 Flutter Inspector 中啟用“反轉超大影像”。

【譯】Flutter 2 正式版的新功能,一睹為快

現在,當開發者顯示解析度明顯大於其顯示尺寸的影像時,該影像將上下顛倒顯示,以便在開發者的應用中輕鬆查詢。

【譯】Flutter 2 正式版的新功能,一睹為快

此外,根據大眾的需求,除了在 Flutter Inspector 的“佈局資源管理器”中顯示有關靈活佈局的詳細資訊外,我們還新增了顯示固定佈局的功能,使開發者能夠除錯各種佈局。

【譯】Flutter 2 正式版的新功能,一睹為快

這還不是全部,這只是Flutter DevTools 2中更多新功能的摘要:

  • 在 Flutter 框架圖中新增了平均 FPS 資訊並提高了可用性;
  • 用紅色錯誤標籤在網路事件探查器中調出失敗的網路請求。
  • 更快的新記憶體檢視圖表,更小且更易於使用,其中包括用於描述特定時間活動的新懸浮卡。
  • 將搜尋和過濾新增到“日誌記錄”選項卡。
  • 在啟動DevTools之前跟蹤日誌,因此啟動時可以檢視完整的日誌歷史記錄。
  • 將“效能”檢視重新命名為“ CPU Profiler”,以使其更清楚地提供什麼功能。
  • 向 CPU Profiler 火焰圖新增了時序網格。
  • 將“時間軸”檢視重新命名為“效能”,以便更清楚地瞭解其提供的功能。

Android Studio / IntelliJ擴充套件

用於 IntelliJ 系列 IDE 的 Flutter 外掛也為 Flutter 2 提供了許多新功能,首先有一個新的專案嚮導,它與 IntelliJ 中的新嚮導樣式匹配。

【譯】Flutter 2 正式版的新功能,一睹為快

【譯】Flutter 2 正式版的新功能,一睹為快

另外如果正在 Linux 上使用 IntelliJ 或 Android Studio 對從 Snap Store 安裝的Flutter SDK 進行程式設計,則 Flutter 快照路徑已新增到已知 SDK 路徑列表中,這使Flutter 快照的使用者可以更輕鬆地在“設定”中配置 Flutter SDK。

【譯】Flutter 2 正式版的新功能,一睹為快

Visual Studio程式碼擴充套件

Visual Studio Code 的 Flutter 擴充套件也對 Flutter 2 進行了改進,從許多測試增強功能開始,包括重新執行僅失敗的測試的功能。

【譯】Flutter 2 正式版的新功能,一睹為快

經過兩年的開發,對 Dart 的LSP(語言伺服器協議)支援現已作為預設方式提供給 Dart 分析器,以將其整合到 Flutter 擴充套件的 Visual Studio Code 中。

LSP 支援對 Flutter 開發進行了許多改進,包括能夠在當前Dart檔案中應用某種型別的所有修復程式,並使程式碼完成生成完整的函式呼叫(包括括號和必需的引數)的功能。

【譯】Flutter 2 正式版的新功能,一睹為快

【譯】Flutter 2 正式版的新功能,一睹為快

LSP 的支援不僅限於Dart,它還支援 pubspec.yaml 和 analysis_options.yaml 檔案中的程式碼完成。

【譯】Flutter 2 正式版的新功能,一睹為快

DartPad updated to support Flutter 2

【譯】Flutter 2 正式版的新功能,一睹為快

現在,開發者可以嘗試使用 Flutter 的新的空安全版本,而無需離開自己喜歡的瀏覽器。

Ecosystem updates

Flutter 的開發經驗不僅包含框架和工具,還包括其他內容,它還包括適用於 Flutter 應用程式的各種軟體包和外掛。

自上一次 Flutter 穩定版本釋出以來,該領域也發生了很多事情。例如,在 cameravideo_player 外掛之間已合併了將近30個PR,以大大提高兩者的質量。

另外,如果你是一個 Firebase 的使用者,我們很高興地宣佈最流行的外掛質量已經得到了新的提升,包括空安全的支援,以及全套的支援 Android,iOS,Web,和 MacOS,這些外掛包括:

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

另外,如果您正在尋找應用程式的崩潰報告,則可能需要考慮 Sentry,該公司已經發布了適用於Flutter應用程式的新SDK:https://blog.sentry.io/2021/03/03/with-flutter-and-sentry-you-can-put-all-your-eggs-in-one-repo/ 。

【譯】Flutter 2 正式版的新功能,一睹為快

藉助Sentry的Flutter SDK,可以實時收到在 Android,iOS或本機平臺上發生的錯誤的通知。

此外,如果還沒有看到 Flutter Community 的 “plus” 外掛,則需要將其簽出。

他們分叉了 Flutter 團隊最初開發的許多受歡迎的外掛,並新增了 null 安全支援,對其他平臺的支援和一整套全新的文件,以及開始修復 flutter/plugins 儲存庫中的適當問題,該外掛包括以下內容:

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

plus.fluttercommunity.dev/

此時與 Flutter 相容的軟體包和外掛集的數量超過 15,000,這會使得很開發者難找到優質的的軟體包和外掛。

因此,我們會發布釋出點數(靜態分析得分),受歡迎程度,喜歡度,並且,對於特別高的質量,會發布那些特別標記為 Flutter Favorite 的包裝,為了及時應對 Flutter 2,我們在收藏夾列表中新增了幾個新軟體包:

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

最後但並非最不重要的一點是,對於對軟體包的是否適用於 Flutter 的最新版本感興趣的軟體包作者或軟體包使用者,您將需要訪問 Codemagic 的新 pub.green 網站。

【譯】Flutter 2 正式版的新功能,一睹為快

Codemagic 新的 pub.green 網站顯示了最新 Flutter 版本與頂級軟體包的相容性, pub.green 網站測試了 pub.dev 上可用的 Flutter 和 Dart 軟體包與不同Flutter版本的相容性。

詳細可見:https://blog.codemagic.io/pub-green/

Breaking Changes

我們對 Flutter 2 進行了以下重大更改,其中許多可以使用 dart fix 命令或所選 IDE 中的快速修復程式自動緩解:

  • #61366 Continue the clipBehavior breaking change。
  • #66700 預設 FittedBoxclipBehavior 為無。
  • #68905Cupertino 顏色解析度 API 刪除 nullOk 引數
  • #69808Scaffold.ofScaffoldMessenger.of 刪除 nullOk 引數
  • #68910Router.of 中刪除 nullOk 引數,並使其返回不可為空的值
  • #68911 新增 maybeLocaleOf 到本地化
  • #68736Media.queryOf 刪除 nullOK
  • #68917Focus.ofFocusTraversalOrder.ofFocusTraversalGroup.of 中刪除 nullOk 引數
  • #68921Shortcuts.ofActions.findActions.handler 中刪除 nullOk 引數
  • #68925AnimatedList.ofSliverAnimatedList.of 中刪除nullOk引數
  • #69620BuildContex 中刪不推薦使用的方法
  • #70726Navigator.of 中刪除 nullOk 引數,並新增 Navigator.maybeOft
  • #72017 刪除不推薦使用的CupertinoTextThemeData.brightness
  • #72395HoverEvent 中刪除不建議使用的 PointerEnterEventPointerExitEvent
  • #72532 刪除不建議使用的showDialog.child
  • #72890 刪除不推薦使用的Scaffold.resizeToAvoidBottomPadding
  • #72893 刪除不推薦使用的WidgetsBinding.[deferFirstFrameReportallowFirstFrameReport]
  • #72901 刪除不推薦使用的 StatefulElement.inheritFromElement
  • #72903 刪除不推薦使用的 Element 方法
  • #73604 刪除不建議使用的 CupertinoDialog
  • #73745 從 [CupertinoSliver] NavigationBar 刪除不推薦使用的 actionForegroundColor
  • 73746 刪除不贊成使用的 ButtonTheme.bar
  • #73747 刪除 span deprecations
  • #73748 刪除棄用的 RenderView.scheduleInitialFrame
  • #73749 刪除不贊成使用的 Layer.findAll
  • #75657Localizations.localeOf 刪除殘留的 nullOk 引數
  • #74680Actions.invoke 刪除 nullOk ,新增 Actions.maybeInvoke .