Flutter 1.17版本釋出,帶來多個新特性

xiangzhihong發表於2020-05-10

多年以前,當我們討論移動跨平臺開發時,總會有人提出跨平臺應用程式速度慢的刻板問題。現在,使用Flutter自帶的渲染引擎我們完全可以開發出媲美原生應用的使用者體驗,同時一套程式碼即可同時執行在iOS、Android和瀏覽器等多個平臺,也帶來了應用開發效率的提升。

作為目前最流行的移動跨平臺技術方案,最近兩年,Flutter在移動跨平臺開發方面的成長可以說是有目共睹的。進入2020年,Google官方在前不久釋出了2020年的更新計劃,並在前兩天更新了Flutter 1.17版本,這是2020年的第一個穩定版本。

按照官方的說法,Flutter 1.17版本關閉了自Flutter 1.12版本的6,339個問題,從231位貢獻者那裡合併了3164個PR,並修復了許多錯誤。除了質量改進之外,Flutter1.17版本還在增加了一些新功能,包括iOS上的Metal支援,新的Material元件,新的Network跟蹤工具等等!

下面,就讓我們具體來看一下Flutter 1.17版本帶來的一些新特性吧!

移動效能和尺寸改進

此版本最重要的地方就是在效能和記憶體方面進行的改進,因此,只需將您的應用程式升級到此版本,就會看到更快的動畫,更小的應用程式和更低的記憶體利用率。經過測算,在此版本中,預設導航情況(不透明的不透明路線)的速度將提高20%-37%。對於簡單的iOS動畫,您還將看到最多減少40%的CPU / GPU使用率,具體取決於硬體。詳細參考資料:

除此之外,使用此版本打的包顯著的減少了應用程式的大小。例如,Android的Flutter Gallery示例在2019年底為9.6MB,現在為8.1MB,減少了18.5%。對於記憶體使用,此版本將快速滾動瀏覽大影像時減少了70%的記憶體,具體取決於裝置的記憶體量,提高了效能,優化記憶體佔用。下面是一張對比圖。

在這裡插入圖片描述
不過最大的效能提升來自在 iOS 系統中實現對 Metal 的支援。

Metal對iOS效能提升50%

Apple 提供的 Metal API 可以使開發者可以直接訪問底層 GPU,它也是 Apple 推薦使用的圖形 API。在支援 Metal 的 iOS 裝置上,Flutter 將預設使用 Metal,使得應用在絕大多數情況下都執行得更快,渲染速度平均提升約 50% (具體取決於裝置的工作負載),具體參考渲染速度平均提升約 50%

在這裡插入圖片描述

而對於那些不完全支援 Metal 的裝置, 如使用 A7 之前的處理器或 iOS 10 之前系統的裝置,Flutter 會和以前的版本一樣使用 OpenGL進行渲染,在這些裝置上實現原生渲染速度。對於Metal,可以參考iOS Metal 常見問題解答

新的Material控制元件

基於多方使用者的反饋,Flutter也在持續推進 Material 設計系統在 Flutter 開發中落地。在新版本中,我們加入了 NavigationRail元件,這是一個新的 widget,提供了響應式的應用導航模型。它由 Google Material Design 團隊設計並實現。 NavigationRail 非常適合在移動和桌面裝置之間切換的應用,當您的應用所在的螢幕尺寸增大時,您可以非常容易地從 BottomNavigator 切換成 NavigationRail。

在這裡插入圖片描述

您可以在 web_dashboard 樣例或者 DartPad 中實際體驗 NavigationRail。除了新增了新的 widget 之外,新版本還更新了 Material DatePicker 以及修正了文字選擇選單 widget 的溢位顯示問題。

在這裡插入圖片描述
並且,DatePicker 基於更新過的 Material 設計指南引入了新的視覺設計,並新增了文字輸入模式,詳情請閱讀 Material DatePicker 改版文件

另外,在Flutter 1.17中,還增加了新的Animations軟體包,該軟體包提供了實現新的Material motion規範的預構建動畫。

在這裡插入圖片描述

新的Flutter文字主題

在新版本中,Flutter 團隊在不破壞現有 Flutter 應用的同時,完成了對 2018 年 Material Design 規範文字排版縮放 (Type Scale) 的實現。2018 年 10 月,我們在 PR 22330 中新增了對新配置 (而不是新名稱) 的可選支援。現有的文字樣式名稱沒有更改,因為這屬於重大的 API 更改,可能會影響到大多數應用。 Flutter 1.17 更新了 TextTheme API,以遵循當前的 Material 規範,但保留了舊的名稱,從而不影響您的程式碼。由於舊的名稱已經被廢棄,您將收到 warning 提示,建議採用新的名稱。2018 年 Material TextStyle 的名稱和配置彙總如下表所示。

在這裡插入圖片描述
Material Design 規範中稱為 body1 和 body2 的 TextStyle 在 Flutter TextTheme API 中被稱為 bodyText1 和 bodyText2。同樣的,在規範中稱為 H1-H6 的 TextStyle,在 TextTheme API 中稱為 headline1-headline6。

Google字型

文字和字型總是密不可分,如果新的 Material 文字縮放實現讓您眼前一亮,那麼您可能也會對新的 Google Fonts for Flutter v1.0 頗感興趣。

在這裡插入圖片描述
Google字型允許開發人員在其應用中輕鬆地嘗試和使用fonts.google.com中的任何字型。 當應用準備釋出時,開發人員將決定使用者是否通過從API下載字型來接收字型,或者將其與應用包預先捆綁在一起。

無障礙功能和國際化

最後,是我們持續關注的課題——無障礙功能。我們認為,讓 Flutter 應用可以服務最為廣泛的受眾是我們的首要任務之一。在新版本中,我們做了更加全面的工作,對滾動、文字框以及其他輸入 widget 的無障礙功能進行了修復。GitHub 上有我們在這個版本中完成修復的無障礙功能完整列表。我們希望開發者能多多測試自己應用的無障礙功能,並且隨著這次版本還發布了一些推薦的最佳實踐供大家參考。

而在國際化方面,我們一直在研究一些影響三星鍵盤輸入法的問題,這些問題影響了各種東亞語言的文字輸入。 我們很高興地報告,我們已經完成了這項工作,尤其是韓國開發人員應該在此版本中找到很多值得慶祝的東西。

Dart DevTools 支援Flutter

將當前版本的 Dart DevTools 替換成新的 Flutter 版本,然後在啟動 DevTools 後點選右上角的 Beaker 圖示就可以 支援 Flutter了。

在這裡插入圖片描述
由 Flutter 實現的 Dart DevTools 預釋出版本帶來了諸多改進,其中全新的 Network (網路) 選項卡最為重要。
在這裡插入圖片描述
如果您在 Dart DevTools 的預釋出版本中沒有看到 Network 選項卡 (比如,您是通過命令列來使用 DevTools),那麼可以通過如下命令手動更新它,如下所示。

pub global activate devtools
複製程式碼

然後,在按下 Record (錄製) 按鈕後, Network 選項卡會顯示您的 Flutter 應用的網路流量情況。如果您想在應用啟動時就立即開始監測網路流量,可以在您的 main() 方法中加入如下程式碼。


void main() {
    // enable network traffic logging
    HttpClient.enableTimelineLogging = true;
    runApp(MyApp());
}
複製程式碼

除了 Dart DevTools 的更新之外,這個版本還實驗性地增加了 快速啟動 選項,當您除錯 Android 版 Flutter 應用時,其啟動速度可以提升高達 70%。您可以通過如下命令來開啟這一功能。

flutter run --fast-start -d <您的Android裝置>
複製程式碼

這個選項會安裝一個只依賴您的外掛程式碼的通用 Android 應用,而不包含任何 Dart 程式碼或資源。這會讓重複執行的 flutter run 命令更快地啟動,因為修改 Dart 程式碼或資源並不需要重新構建 APK。和通常的啟動選項不同,快速啟動選項將您的應用繫結到了一個通用的 Android "容器" 中,實際上並不會在您的裝置上安裝。在一些情況下,比如您使用的外掛訪問了後臺執行的內容,快速啟動選項將不起作用。如果您覺得 Android 除錯的啟動時間漫長得讓人頭疼,不妨試試這個全新的選項吧。

如果您的目標平臺是 Android,您會注意到,現在建立新的 Flutter 專案時只提供 AndroidX 選項。AndroidX 庫提供了被稱為 Android Jetpack 的高階 Android 功能。在上一個版本中,我們不再支援原先的 Android Support Library,轉而將 AndroidX 作為所有新專案的預設選項。在 Flutter 1.17 中,flutter create 命令只有 --androidx 這一個選項。雖然現有的不使用 AndroidX 的 Flutter 應用依然可以編譯,但是時候遷移至 AndroidX 了。

如果您使用 Android Studio 或 IntelliJ,您會發現 Hot Reload (熱過載) 功能的容錯性更強了。在本次更新之前,如果您的應用出現了任何分析錯誤,Hot Reload 將不會重新載入您的程式碼。如果分析錯誤並不涉及您當前正在執行的程式碼 (比如在單元測試中),會讓人很崩潰。但通過本次更新,Hot Reload 將不再受分析錯誤影響,而取決於 VM 中的編譯錯誤。

如果您想更早地體驗 Android Studio 或 IntelliJ 的 Flutter 外掛中類似的改進,我們現在也為 IntelliJ 外掛提供了 dev 渠道,您可以選擇加入,以更快獲取到這些更新。這個 dev 渠道的目標是在公開發布新 IDE 整合功能前通過 Flutter 開發者收集反饋。如果您希望嚐鮮並且願意向 Flutter 工具團隊提供早期反饋,請即刻加入我們的體驗計劃

如果您使用的是 Visual Studio Code開發工具,我們推薦使用新的 Dart: List Outdated Packages 命令來執行新的 pub outdedated 命令,如下所示。

在這裡插入圖片描述
此命令旨在幫助您跟蹤依賴項中的版本控制問題。最後,但並非最不重要的一點是,如果您在使用Flutter時發生崩潰,則工具會提示您提交該錯誤。我們的團隊會密切關注這些錯誤報告的嚴重程度和出現頻率,所以當這些提示出現時,請提交 bug 給我們。
在這裡插入圖片描述

其他重要改動

和以往的版本一樣,我們會盡量減少每一個 Flutter 新版本中的重要改動,並回反覆權衡利弊,確保 Flutter 能夠提供直觀、靈活的 API,能夠在新平臺上支援新的開發習慣。 Flutter 1.17 中的重要改動包括:

  • #42100 在使用 pushReplacement 時使用之前的路徑執行後續動畫
  • #45940 棄用 UpdateLiveRegionEvent
  • #49389 在高速滾動時推遲影像解碼
  • #49391 文字選取溢位 (Android)
  • #49771 斷言快取提示未針對空繪圖物件進行設定
  • #50318 實時影像快取
  • #50354 使用構造塊高度計算選區範圍,確保其維持在可視範圍內
  • #50733 在gen_l10n中生成訊息查詢
  • #51435 從RouteSettings中移除isinitialroute
  • #52781 將mouse_tracking.dart移動到rendering

連結:

移動跨平臺開發實戰
Flutter中文網

相關文章