Flutter 1.12 重磅發(fā)布：支持 Web 與 macOS

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

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

Flutter 框架

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

完全支持 iOS 13 暗色模式

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

<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，我們還改進了滾動條保真度，提供了自適應的 CupertinoAlertDialog 填充，并允許為 CupertinoDatePicker 設定最小和最大日期限制。

改進的 Add-to-App 體驗

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

Flutter 1.12 支持將全屏 Flutter 實例添加到 App 中，具體來說：

  • 提供了穩(wěn)定的平臺集成 API（Java、Kotlin、Objective-C 和 Swift），包括一組新的 Android 平臺 API，更多詳情請參看： http://flutter.dev/go/android-project-migration
  • 可以在內嵌的 Flutter 模塊里使用插件。
  • 更多的集成方式，如通過 Android AAR 和 iOS Framework，獲得與現(xiàn)有構建系統(tǒng)更好的兼容性。
  • 重構了“flutter attach”機制（命令行工具、VSCode 和 IntelliJ 插件），可以更容易地 attach 到運行中的 Flutter 模塊進行調試或熱重載。

要嘗試改進過的 Add-to-App 功能，可以參考 Flutter 和 GitHub 。

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

Dart 2.7

Dart 是 Flutter 的基礎，所以，如果你還不知道擴展方法和字符串（包括 emoji）安全，或者你想知道如何通過非空類型實現(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 頻道都提供了改進的 Web 支持。

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

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

macOS 支持

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

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

對 Windows 和 Linux 的支持還處在技術預覽階段，后續(xù)我們會更新這方面的進度，更多詳情請參看這里。

Flutter 工具

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

DartPad

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

DartPad： https://dartpad.dev/

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

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

Hot UI

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

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

Layout Explorer

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

多設備調試

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

改進的 Android 構建流程

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

另一方面，我們用 R8 替代了 ProGuard。R8 是谷歌提供的一個新的代碼優(yōu)化器。在此之前，開發(fā)者需要根據插件指南手動配置 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)、應用程序或其他可視元素的渲染主圖像文件。在 Flutter 1.12 中，我們提供了 GoldenFileComparator 和 LocalFileComparator 類，用于進行圖像像素比較（而不是按照比特比較），避免誤判。

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

社區(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 提供的分數(shù)以及認證發(fā)布者功能可以作為用戶的參考，而 pub.dev 現(xiàn)在提供的評分系統(tǒng)則是錦上添花。

http://go/dart-2.7-annoucement

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

Flutter 1.12重磅發(fā)布：支持Web與macOS

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

社區(qū)開發(fā)的工具

Flutter 社區(qū)貢獻了大量優(yōu)秀的工具，以下列出了一小部分。

Flutter 1.12重磅發(fā)布：支持Web與macOS

<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 設備預覽</center>

Flutter 1.12重磅發(fā)布：支持Web與macOS

<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>

Flutter 1.12重磅發(fā)布：支持Web與macOS

<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 插件。

Flutter 1.12重磅發(fā)布：支持Web與macOS

你可以借助這個插件直接連接到托管在云端的 Mac，進行 iOS 和 macOS Flutter 代碼測試。更多有關 Nevercode 的信息可以參看這里。

其他合作伙伴（如 Supernova、Rive 和 Adobe）相關內容可以在這里看到。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容