Flutter 1.12重磅發佈：支持Web與macOS

今天，前端年度“明星”Flutter 正式發佈了最新版本 1.12。新版本有哪些值得關注的新特性和改進？來自 Flutter 開發團隊的產品經理 Chris Sells 將爲大家詳細解讀。

今天，Flutter 1.12 正式發佈，這是從 2018 年 12 月發佈 1.0 版本以來的第 5 個穩定版。過去的一年是驚豔的一年！我們關閉了 5303 個 issue，合併了來自 484 個貢獻者的 5950 個 PR，增加了對 Android App Bundles 和 iOS 13 的支持，實現了鼠標和鍵盤事件處理機制，發佈了 App 內購買插件，合併了多個重要的性能改進，增加了 24 種本地化和多個新的小部件。另外，Flutter 工具本身也得到大幅改進。改進的 Dart DevTools 提供了部件檢查器、內存 /CPU 分析以及增強的日誌功能。此外，我們還加入了引用類型自動導入功能、對 ChromeOS 的顯式支持、UI 指南，以及改進的錯誤消息呈現（格式化、顏色高亮和更多的可操作項）。

對於每一個版本，我們都懷着始終如一的信念——一切都纔剛開始。這個版本也不例外，這是我們有史以來最大的一個版本，有 188 位貢獻者參與，關閉了 4571 個 issue，合併了 1905 個 PR。

Flutter 框架新版本完全支持 iOS 13 的暗色模式，加入了新的 Cupertino 小部件，做了一些 UX 調整，並帶來大幅改進的 Add-to-App 體驗。

完全支持 iOS 13 暗色模式完全支持 iOS 13 主題模式是 Flutter 1.12 的一大亮點，包括支持 Cupertino 小部件的暗色模式。

從上圖可以看到，對暗色模式的支持不僅僅是更換背景色，其他部分的顏色也匹配得恰到好處。另外，我們還新增了兩個小部件。

CupertinoContextMenu 和 CupertinoSlidingSegmentedControl

爲了讓 Flutter App 看起來更像原生 App，我們還改進了滾動條保真度，提供了自適應的 CupertinoAlertDialog 填充，並允許爲 CupertinoDatePicker 設定最小和最大日期限制。

改進的 Add-to-App 體驗新版本也帶來了 Add-to-App（將 Flutter 集成到已有 Android 或 iOS App 的能力）方面的改進。我們努力簡化集成流程，爲開發者帶來更好的體驗，包括在 Android Studio 中加入新的 Flutter 模塊嚮導。

Flutter 1.12 支持將全屏 Flutter 實例添加到 App 中，具體來說：- 提供了穩定的平臺集成 API（Java、Kotlin、Objective-C 和 Swift），包括一組新的 Android 平臺 API，更多詳情請參看：http://flutter.dev/go/android-project-migration

可以在內嵌的 Flutter 模塊裏使用插件。
更多的集成方式，如通過 Android AAR 和 iOS Framework，獲得與現有構建系統更好的兼容性。
重構了“flutter attach”機制（命令行工具、VSCode 和 IntelliJ 插件），可以更容易地 attach 到運行中的 Flutter 模塊進行調試或熱重載。

要嘗試改進過的 Add-to-App 功能，可以參看：

https://flutter.dev/docs/development/add-to-app
https://github.com/flutter/samples/tree/master/experimental/add_to_app

後者演示了各種集成場景。

Dart 2.7Dart 是 Flutter 的基礎，所以，如果你還不知道擴展方法和字符串（包括 emoji）安全，或者你想知道如何通過非空類型實現 null safety，可以參看：

https://medium.com/dartlang/dart-2-7-a3710ec54e97

Flutter 1.12 穩定版之外除了穩定版帶來的新特性之外，Flutter 1.12 還提供了 Web 支持（beta 版）和 macOS 支持（alpha 版）。

Web 支持Flutter 1.12 的 master、dev 和 beta 頻道都提供了改進的 Web 支持。

如上圖所示，Rivet 使用了 Flutter 的 Web 支持。Rivet 是一個教育類項目，目前在生產環境中提供了移動 App。他們使用 Flutter 和 Firebase 開發了 Web 版 App，計劃於 2020 年初正式發佈。

Rivet：https://rivet.area120.com/link/flutter

macOS 支持對 macOS 的支持很快也會實現，目前正在從技術預覽階段進入到 alpha 階段，master 和 dev 頻道已經可用。

上圖是新版本的 Flutter Gallery，除了支持 Android、iOS 和 Web，現在也支持 macOS。

Flutter 1.12 對桌面的支持由此跨出了一大步，包括新的 DataTree 和 Split 小部件、一些移植的插件，支持發佈和調試模式，使用起來非常簡單。你可以在 Flutter 的系統配置中啓用對 macOS 的支持（master 和 dev 頻道）：$ flutter config — enable-macos-desktop現在也可以使用“flutter create”創建一個可在 macOS 上運行的 Flutter 項目。

除了工具之外，我們也在改進適合桌面 App 的像素密度。移動 App 需要相對較大的控件，因爲用戶通過觸控的方式使用控件，而對於桌面 App 來說，用戶更傾向於使用鼠標。所以，對於桌面 App，Flutter 允許開發者選擇控件的像素密度，讓它們更好地迎合桌面用戶的需求。

爲了改進 Flutter 桌面 App 的體驗，我們做了很多工作，改進了鍵盤導航和鍵盤訪問方式，包括：

同步輔助按鍵和按鍵事件；
在下拉框打開的情況下選擇列表項；
更方便地訪問主焦點；
增加鍵盤導航、開關的懸浮和快捷鍵；
複選框和單選框按鈕；
自動滾動，保持焦點項可見；
基於鍵盤快捷鍵的滾動；
用於處理焦點和懸浮的新部件；
重寫了拷貝 / 粘貼和鍵盤選擇；
使用鍵盤導航下拉框；
像素密度支持；

增加 macOS 功能鍵支持。

對 Windows 和 Linux 的支持還處在技術預覽階段，後續我們會更新這方面的進度，更多詳情請參看：

http://flutter.dev/desktop

Flutter 工具除了 Flutter 框架本身，Flutter 工具也有很多要說的，包括新版 DartPad、更強大的基於 IntelliJ 的 IDE（增加了一個叫作“Hot UI”的預覽版功能）、增強的 Dart DevTools（增加了新的可視化佈局視圖）、在 VSCode 中同時調試多個設備、改進的 Android 構建流程，以及在測試過程中更好地分辨渲染組件。

DartPad如果你還沒用過 DartPad，一定要試一下！你可以在不安裝任何東西的情況下嘗試 Dart 的新特性。新版的 DartPad 現在支持 Flutter！

DartPad：https://dartpad.dev/

如上圖所示，在左邊寫 Flutter 代碼，在右邊可以實時地看到運行結果，你可以不用安裝任何東西就可以使用 Flutter。

除了 DartPad 本身，我們也在將 DartPad 加入到我們的文檔和代碼庫中，這樣開發者就可以在自己喜歡的瀏覽器上學習 Flutter，更多有關 DartPad 的內容請參看：

https://medium.com/dartlang/a-brand-new-dartpad-dev-with-flutter-support-16fe6027784

Hot UI如果你在本地安裝了 Flutter 工具，就會在 IntelliJ/Android Studio 的 Flutter 插件中看到一個新的預覽功能。你可以在 IDE 中直接看到你正在開發的小部件。

這個功能叫作“Hot UI”，就像熱重載一樣，在修改代碼的同時直接更新 UI。你還可以直接修改 UI（比如修改顏色），這個修改也會直接反映到代碼中。要啓用這個功能，請參看：

https://github.com/flutter/flutter-intellij/wiki/HotUI-Getting-Started-instructions

Layout Explorer不管你是手寫代碼，還是使用 Hot UI，代碼都是免不了的，而有代碼的地方就會有問題，這也就是 Dart DevTools 發揮作用的時候。我們在新版本的 DevTools 中加入了一個叫作“Layout Explorer”的新功能。

Layout Explorer 可以幫你可視化小部件的佈局，你還可以通過交互式的方式修改佈局選項。要啓用這個功能，請參看：

https://flutter.dev/docs/development/tools/devtools/inspector#flutter-layout-explorer

多設備調試在大部分情況下，Flutter UI 的開發和調試是在單個設備上完成的，如果能夠同時在多個設備（物理設備或虛擬設備）上調試豈不是更好？VSCode 的 Flutter 插件現在可以支持多會話調試。

從上圖可以看到，同一個 Flutter App 同時運行在三個不同的調試會話中。這個時候如果改一下代碼，熱重載功能會確保代碼改動在三個 App 上都體現出來。如果設置了斷點，不管是哪個 App 都可以觸發斷點。如果你想停止調試其中的一個 App，其他幾個 App 不會受到影響。有關多設備調試的更多信息請參看：

https://github.com/flutter/flutter/wiki/Multi-device-debugging-in-VS-Code

改進的 Android 構建流程在 Android 構建流程方面，我們解決了若干問題。首先，Android 構建流程更健壯了。我們讓 Flutter 插件改用 AndroidX，並建議其他 App 和插件也使用 AndroidX。不過，對於未改用 AndroidX 的插件，如果遇到構建問題，我們提供了其他選擇（使用 Android 歸檔文件和 Jetifier）。新的構建方式速度較慢，所以我們並沒有把它作爲主要的構建方式，但它解決了 95% 我們在構建過程中遇到的問題。

另一方面，我們用 R8 替代了 ProGuard。R8 是谷歌提供的一個新的代碼優化器。在此之前，開發者需要根據插件指南手動配置 ProGuard 規則，而在新版本中，規則可以在插件源代碼中定義好，R8 會自動解析這些規則，爲開發者省去了很多麻煩。

R8：https://developer.android.com/studio/build/shrink-code

另外，我們繼續嘗試給 Flutter 瘦身，把“Hello, World” App（Android 版）大小減小了 2.6%（從 3.8MB 減到了 3.7MB）。

模板圖像測試“模板圖像”（Golden Image）是指給定小部件、狀態、應用程序或其他可視元素的渲染主圖像文件。在 Flutter 1.12 中，我們提供了 GoldenFileComparator 和 LocalFileComparator 類，用於進行圖像像素比較（而不是按照比特比較），避免誤判。

從上圖可以看出，主圖像和測試圖的邊線存在差別。

社區除了 Flutter 框架和工具，Flutter 社區繼續把 Flutter 帶到了新的方向，具體可以觀看這個視頻：

https://youtu.be/tWCr9vlGz_8

我們很慶幸 Flutter 社區有這麼多優秀的開發者，能和你們一起，我們感到很驕傲！

最受歡迎的 Flutter 包在 2018 年 12 月發佈 Flutter 1.0 的時候，pub.dev 上只有 1000 多個包，而在寫這篇文章時，這個數字增長了 6 倍多。有時候選擇多了反而不知道該如何選擇。pub.dev 提供的分數以及認證發佈者功能可以作爲用戶的參考，而 pub.dev 現在提供的評分系統則是錦上添花。

http://go/dart-2.7-annoucement

用戶一直希望我們能夠爲他們推薦包和插件，爲此，我們啓動了“Flutter Favorite”計劃。

被列入“Flutter Favorite”的包（或者插件）應該是你構建 App 的首選。Flutter 生態系統委員會（成員來自谷歌 Flutter 團隊和廣大的 Flutter 社區）將會制定質量標準，並根據這些標準來挑選包。包的作者可以在他們的包文檔中使用“Flutter Favorite”標誌。另外，pub.dev 也會在搜索結果等地方顯示這個標誌。

社區開發的工具Flutter 社區貢獻了大量優秀的工具，以下列出了一小部分。