12 月 12 日砸捏，前端年度“明星”Flutter 正式發(fā)布了最新版本 1.12。新版本有哪些值得關(guān)注的新特性和改進(jìn)奸远？來自 Flutter 開發(fā)團(tuán)隊(duì)的產(chǎn)品經(jīng)理 Chris Sells 將為大家詳細(xì)解讀万俗。
12 月 12 日璃吧，F(xiàn)lutter 1.12 正式發(fā)布词疼，這是從 2018 年 12 月發(fā)布 1.0 版本以來的第 5 個穩(wěn)定版俯树。過去的一年是驚艷的一年！我們關(guān)閉了 5303 個 issue贰盗，合并了來自 484 個貢獻(xiàn)者的 5950 個 PR许饿，增加了對 Android App Bundles 和 iOS 13 的支持，實(shí)現(xiàn)了鼠標(biāo)和鍵盤事件處理機(jī)制舵盈，發(fā)布了 App 內(nèi)購買插件陋率，合并了多個重要的性能改進(jìn)球化，增加了 24 種本地化和多個新的小部件。另外瓦糟，F(xiàn)lutter 工具本身也得到大幅改進(jìn)筒愚。改進(jìn)的 Dart DevTools 提供了部件檢查器、內(nèi)存 /CPU 分析以及增強(qiáng)的日志功能菩浙。此外锨能，我們還加入了引用類型自動導(dǎo)入功能、對 ChromeOS 的顯式支持芍耘、UI 指南，以及改進(jìn)的錯誤消息呈現(xiàn)（格式化熄阻、顏色高亮和更多的可操作項(xiàng)）斋竞。
對于每一個版本，我們都懷著始終如一的信念——一切都才剛開始秃殉。這個版本也不例外坝初，這是我們有史以來最大的一個版本，有 188 位貢獻(xiàn)者參與钾军，關(guān)閉了 4571 個 issue鳄袍，合并了 1905 個 PR。
Flutter 框架
新版本完全支持 iOS 13 的暗色模式吏恭，加入了新的 Cupertino 小部件拗小，做了一些 UX 調(diào)整，并帶來大幅改進(jìn)的 Add-to-App 體驗(yàn)樱哼。
完全支持 iOS 13 暗色模式
完全支持 iOS 13 主題模式是 Flutter 1.12 的一大亮點(diǎn)哀九，包括支持 Cupertino 小部件的暗色模式。
從上圖可以看到搅幅，對暗色模式的支持不僅僅是更換背景色阅束，其他部分的顏色也匹配得恰到好處。另外茄唐，我們還新增了兩個小部件息裸。
<center style="color: rgb(74, 74, 74); font-family: Avenir, Tahoma, Arial, "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">CupertinoContextMenu 和 CupertinoSlidingSegmentedControl</center>
為了讓 Flutter App 看起來更像原生 App，我們還改進(jìn)了滾動條保真度沪编，提供了自適應(yīng)的 CupertinoAlertDialog 填充呼盆，并允許為 CupertinoDatePicker 設(shè)定最小和最大日期限制。
改進(jìn)的 Add-to-App 體驗(yàn)
新版本也帶來了 Add-to-App（將 Flutter 集成到已有 Android 或 iOS App 的能力）方面的改進(jìn)漾抬。我們努力簡化集成流程宿亡，為開發(fā)者帶來更好的體驗(yàn)，包括在 Android Studio 中加入新的 Flutter 模塊向?qū)А?/p>
Flutter 1.12 支持將全屏 Flutter 實(shí)例添加到 App 中纳令，具體來說：
- 提供了穩(wěn)定的平臺集成 API（Java挽荠、Kotlin克胳、Objective-C 和 Swift），包括一組新的 Android 平臺 API圈匆，更多詳情請參看： http://flutter.dev/go/android-project-migration
- 可以在內(nèi)嵌的 Flutter 模塊里使用插件漠另。
- 更多的集成方式，如通過 Android AAR 和 iOS Framework跃赚，獲得與現(xiàn)有構(gòu)建系統(tǒng)更好的兼容性笆搓。
- 重構(gòu)了“flutter attach”機(jī)制（命令行工具、VSCode 和 IntelliJ 插件）纬傲，可以更容易地 attach 到運(yùn)行中的 Flutter 模塊進(jìn)行調(diào)試或熱重載满败。
要嘗試改進(jìn)過的 Add-to-App 功能，可以參考 Flutter 和 GitHub 叹括。
后者演示了各種集成場景算墨。
Dart 2.7
Dart 是 Flutter 的基礎(chǔ)，所以汁雷，如果你還不知道擴(kuò)展方法和字符串（包括 emoji）安全净嘀，或者你想知道如何通過非空類型實(shí)現(xiàn) null safety，可以參看這里侠讯。
Flutter 1.12 穩(wěn)定版之外
除了穩(wěn)定版帶來的新特性之外挖藏，F(xiàn)lutter 1.12 還提供了 Web 支持（beta 版）和 macOS 支持（alpha 版）。
Web 支持
Flutter 1.12 的 master厢漩、dev 和 beta 頻道都提供了改進(jìn)的 Web 支持膜眠。
如上圖所示，Rivet 使用了 Flutter 的 Web 支持溜嗜。Rivet 是一個教育類項(xiàng)目柴底，目前在生產(chǎn)環(huán)境中提供了移動 App。他們使用 Flutter 和 Firebase 開發(fā)了 Web 版 App粱胜，計(jì)劃于 2020 年初正式發(fā)布柄驻。
Rivet： https://rivet.area120.com/link/flutter
macOS 支持
對 macOS 的支持很快也會實(shí)現(xiàn)，目前正在從技術(shù)預(yù)覽階段進(jìn)入到 alpha 階段焙压，master 和 dev 頻道已經(jīng)可用鸿脓。
上圖是新版本的 Flutter Gallery，除了支持 Android涯曲、iOS 和 Web野哭，現(xiàn)在也支持 macOS。
Flutter 1.12 對桌面的支持由此跨出了一大步幻件，包括新的 DataTree 和 Split 小部件拨黔、一些移植的插件，支持發(fā)布和調(diào)試模式绰沥，使用起來非常簡單篱蝇。你可以在 Flutter 的系統(tǒng)配置中啟用對 macOS 的支持（master 和 dev 頻道）：<span>$</span><span> flutter config — <span>enable</span>-macos-desktop</span>現(xiàn)在也可以使用“flutter create”創(chuàng)建一個可在 macOS 上運(yùn)行的 Flutter 項(xiàng)目贺待。
除了工具之外，我們也在改進(jìn)適合桌面 App 的像素密度零截。移動 App 需要相對較大的控件麸塞，因?yàn)橛脩敉ㄟ^觸控的方式使用控件，而對于桌面 App 來說涧衙，用戶更傾向于使用鼠標(biāo)哪工。所以，對于桌面 App弧哎，F(xiàn)lutter 允許開發(fā)者選擇控件的像素密度雁比，讓它們更好地迎合桌面用戶的需求。
為了改進(jìn) Flutter 桌面 App 的體驗(yàn)撤嫩，我們做了很多工作章贞，改進(jìn)了鍵盤導(dǎo)航和鍵盤訪問方式，包括：
- 同步輔助按鍵和按鍵事件非洲；
- 在下拉框打開的情況下選擇列表項(xiàng)；
- 更方便地訪問主焦點(diǎn)蜕径；
- 增加鍵盤導(dǎo)航两踏、開關(guān)的懸浮和快捷鍵；
- 復(fù)選框和單選框按鈕兜喻；
- 自動滾動梦染，保持焦點(diǎn)項(xiàng)可見；
- 基于鍵盤快捷鍵的滾動朴皆；
- 用于處理焦點(diǎn)和懸浮的新部件帕识；
- 重寫了拷貝 / 粘貼和鍵盤選擇；
- 使用鍵盤導(dǎo)航下拉框遂铡；
- 像素密度支持肮疗；
- 增加 macOS 功能鍵支持。
對 Windows 和 Linux 的支持還處在技術(shù)預(yù)覽階段扒接，后續(xù)我們會更新這方面的進(jìn)度伪货，更多詳情請參看這里。
Flutter 工具
除了 Flutter 框架本身钾怔，F(xiàn)lutter 工具也有很多要說的碱呼，包括新版 DartPad、更強(qiáng)大的基于 IntelliJ 的 IDE（增加了一個叫作“Hot UI”的預(yù)覽版功能）宗侦、增強(qiáng)的 Dart DevTools（增加了新的可視化布局視圖）愚臀、在 VSCode 中同時調(diào)試多個設(shè)備、改進(jìn)的 Android 構(gòu)建流程矾利，以及在測試過程中更好地分辨渲染組件姑裂。
DartPad
如果你還沒用過 DartPad馋袜，一定要試一下！你可以在不安裝任何東西的情況下嘗試 Dart 的新特性炭分。新版的 DartPad 現(xiàn)在支持 Flutter桃焕！
DartPad： https://dartpad.dev/
如上圖所示，在左邊寫 Flutter 代碼捧毛，在右邊可以實(shí)時地看到運(yùn)行結(jié)果观堂，你可以不用安裝任何東西就可以使用 Flutter。
除了 DartPad 本身呀忧，我們也在將 DartPad 加入到我們的文檔和代碼庫中师痕，這樣開發(fā)者就可以在自己喜歡的瀏覽器上學(xué)習(xí) Flutter，更多有關(guān) DartPad 的內(nèi)容請參看這里而账。
Hot UI
如果你在本地安裝了 Flutter 工具席爽，就會在 IntelliJ/Android Studio 的 Flutter 插件中看到一個新的預(yù)覽功能。你可以在 IDE 中直接看到你正在開發(fā)的小部件沪停。
這個功能叫作“Hot UI”痴柔，就像熱重載一樣，在修改代碼的同時直接更新 UI咐吼。你還可以直接修改 UI（比如修改顏色）吹缔，這個修改也會直接反映到代碼中。要啟用這個功能锯茄，請參看這里厢塘。
Layout Explorer
不管你是手寫代碼，還是使用 Hot UI肌幽，代碼都是免不了的晚碾，而有代碼的地方就會有問題，這也就是 Dart DevTools 發(fā)揮作用的時候喂急。我們在新版本的 DevTools 中加入了一個叫作“Layout Explorer”的新功能格嘁。
Layout Explorer 可以幫你可視化小部件的布局，你還可以通過交互式的方式修改布局選項(xiàng)廊移。要啟用這個功能讥蔽，請參看這里。
多設(shè)備調(diào)試
在大部分情況下画机，F(xiàn)lutter UI 的開發(fā)和調(diào)試是在單個設(shè)備上完成的冶伞，如果能夠同時在多個設(shè)備（物理設(shè)備或虛擬設(shè)備）上調(diào)試豈不是更好？VSCode 的 Flutter 插件現(xiàn)在可以支持多會話調(diào)試步氏。
從上圖可以看到响禽，同一個 Flutter App 同時運(yùn)行在三個不同的調(diào)試會話中。這個時候如果改一下代碼，熱重載功能會確保代碼改動在三個 App 上都體現(xiàn)出來芋类。如果設(shè)置了斷點(diǎn)隆嗅，不管是哪個 App 都可以觸發(fā)斷點(diǎn)。如果你想停止調(diào)試其中的一個 App侯繁，其他幾個 App 不會受到影響胖喳。有關(guān)多設(shè)備調(diào)試的更多信息請參看這里。
改進(jìn)的 Android 構(gòu)建流程
在 Android 構(gòu)建流程方面贮竟，我們解決了若干問題丽焊。首先，Android 構(gòu)建流程更健壯了咕别。我們讓 Flutter 插件改用 AndroidX技健，并建議其他 App 和插件也使用 AndroidX。不過惰拱，對于未改用 AndroidX 的插件雌贱，如果遇到構(gòu)建問題，我們提供了其他選擇（使用 Android 歸檔文件和 Jetifier）偿短。新的構(gòu)建方式速度較慢欣孤，所以我們并沒有把它作為主要的構(gòu)建方式，但它解決了 95% 我們在構(gòu)建過程中遇到的問題昔逗。
另一方面降传，我們用 R8 替代了 ProGuard。R8 是谷歌提供的一個新的代碼優(yōu)化器纤子。在此之前，開發(fā)者需要根據(jù)插件指南手動配置 ProGuard 規(guī)則款票，而在新版本中控硼，規(guī)則可以在插件源代碼中定義好，R8 會自動解析這些規(guī)則艾少，為開發(fā)者省去了很多麻煩卡乾。
R8： https://developer.android.com/studio/build/shrink-code
另外，我們繼續(xù)嘗試給 Flutter 瘦身缚够，把“Hello, World” App（Android 版）大小減小了 2.6%（從 3.8MB 減到了 3.7MB）幔妨。
模板圖像測試
“模板圖像”（Golden Image）是指給定小部件、狀態(tài)谍椅、應(yīng)用程序或其他可視元素的渲染主圖像文件误堡。在 Flutter 1.12 中，我們提供了 GoldenFileComparator 和 LocalFileComparator 類雏吭，用于進(jìn)行圖像像素比較（而不是按照比特比較）锁施，避免誤判。
從上圖可以看出，主圖像和測試圖的邊線存在差別悉抵。
社區(qū)
除了 Flutter 框架和工具肩狂，F(xiàn)lutter 社區(qū)繼續(xù)把 Flutter 帶到了新的方向，具體可以觀看這個視頻姥饰。
我們很慶幸 Flutter 社區(qū)有這么多優(yōu)秀的開發(fā)者傻谁，能和你們一起，我們感到很驕傲列粪！
最受歡迎的 Flutter 包
在 2018 年 12 月發(fā)布 Flutter 1.0 的時候审磁，pub.dev 上只有 1000 多個包，而在寫這篇文章時篱竭，這個數(shù)字增長了 6 倍多力图。有時候選擇多了反而不知道該如何選擇。pub.dev 提供的分?jǐn)?shù)以及認(rèn)證發(fā)布者功能可以作為用戶的參考掺逼，而 pub.dev 現(xiàn)在提供的評分系統(tǒng)則是錦上添花吃媒。
http://go/dart-2.7-annoucement
用戶一直希望我們能夠?yàn)樗麄兺扑]包和插件，為此吕喘，我們啟動了“Flutter Favorite”計(jì)劃赘那。
被列入“Flutter Favorite”的包（或者插件）應(yīng)該是你構(gòu)建 App 的首選。Flutter 生態(tài)系統(tǒng)委員會（成員來自谷歌 Flutter 團(tuán)隊(duì)和廣大的 Flutter 社區(qū)）將會制定質(zhì)量標(biāo)準(zhǔn)氯质，并根據(jù)這些標(biāo)準(zhǔn)來挑選包募舟。包的作者可以在他們的包文檔中使用“Flutter Favorite”標(biāo)志。另外闻察，pub.dev 也會在搜索結(jié)果等地方顯示這個標(biāo)志拱礁。
社區(qū)開發(fā)的工具
Flutter 社區(qū)貢獻(xiàn)了大量優(yōu)秀的工具，以下列出了一小部分辕漂。
<center style="color: rgb(74, 74, 74); font-family: Avenir, Tahoma, Arial, "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">Flutter 設(shè)備預(yù)覽</center>
<center style="color: rgb(74, 74, 74); font-family: Avenir, Tahoma, Arial, "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">Widget Maker</center>
<center style="color: rgb(74, 74, 74); font-family: Avenir, Tahoma, Arial, "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">Panache</center>
合作伙伴 Nevercode
除了社區(qū)提供的工具之外呢灶，還有其他一些優(yōu)秀的合作伙伴，Nevercode 就是其中不得不提及的一個钉嘹。最新版本的 Nevercode 提供了一整套新功能鸯乃，包括一個叫作 Remote Mac 的 VSCode 插件。
你可以借助這個插件直接連接到托管在云端的 Mac跋涣，進(jìn)行 iOS 和 macOS Flutter 代碼測試缨睡。更多有關(guān) Nevercode 的信息可以參看這里。
其他合作伙伴（如 Supernova陈辱、Rive 和 Adobe）相關(guān)內(nèi)容可以在這里看到奖年。
- 原文標(biāo)題：Announcing Flutter 1.12: What a year!
- 原文地址：https://medium.com/flutter/announcing-flutter-1-12-what-a-year-22c256ba525d
