Categories
程式開發

Flutter 1.12重磅發布:支持Web與macOS


Flutter 1.12重磅發布:支持Web與macOS 1

今天,前端年度“明星”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 小部件的暗色模式。

Flutter 1.12重磅發布:支持Web與macOS 2

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

Flutter 1.12重磅發布:支持Web與macOS 3

CupertinoContextMenu 和 CupertinoSlidingSegmentedControl

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

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

Flutter 1.12重磅發布:支持Web與macOS 4

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 是 Fl​​utter 的基礎,所以,如果你還不知道擴展方法和字符串(包括 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 支持。

Flutter 1.12重磅發布:支持Web與macOS 5

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

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

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

Flutter 1.12重磅發布:支持Web與macOS 6

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

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

Flutter 1.12重磅發布:支持Web與macOS 7

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

Flutter 1.12重磅發布:支持Web與macOS 8

為了改進 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 1.12重磅發布:支持Web與macOS 9

如上圖所示,在左邊寫 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”的新功能。

Flutter 1.12重磅發布:支持Web與macOS 10

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

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

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

Flutter 1.12重磅發布:支持Web與macOS 11

從上圖可以看到,同一個 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 1.12重磅發布:支持Web與macOS 12

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

社區除了 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 1.12重磅發布:支持Web與macOS 13

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

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

Flutter 1.12重磅發布:支持Web與macOS 14

Flutter 設備預覽

Flutter 1.12重磅發布:支持Web與macOS 15

Widget Maker

Flutter 1.12重磅發布:支持Web與macOS 16

Panache

合作夥伴 Nevercode除了社區提供的工具之外,還有其他一些優秀的合作夥伴,Nevercode 就是其中不得不提及的一個。最新版本的 Nevercode 提供了一整套新功能,包括一個叫作 Remote Mac 的 VSCode 插件。

Flutter 1.12重磅發布:支持Web與macOS 17

你可以藉助這個插件直接連接到託管在雲端的 Mac,進行 iOS 和 macOS Flutter 代碼測試。更多有關 Nevercode 的信息可以參看:

https://blog.codemagic.io/more-professional-capable-accessible/

其他合作夥伴(如 Supernova、Rive 和 Adob​​e)相關內容可以在這裡看到:

https://developers.googleblog.com/2019/12/flutter-ui-ambient-computing.html

原文鏈接: https://medium.com/flutter/announcing-flutter-1-12-what-a-year-22c256ba525d

新書推介 | 贈書福利《Flutter 技術入門與實戰》(第 2 版)

看點:國內首本Flutter 著作的作者亢少軍老師新作;谷歌開源移動UI 框架Flutter 零基礎快速入門讀物;從基礎組件的詳解到綜合案例,從工具使用到插件開發;包含大量精選案例、詳細實操步驟、配套課程視頻。

敲黑板!截至12月14日,在評論區留言點贊數前 8 名的小伙伴均可獲得《Flutter 技術入門與實戰》(第 2 版)一本哦!快到評論區留言吧~

Flutter 1.12重磅發布:支持Web與macOS 18

活動推薦2020 年即將到來,回顧 2019 一整年,你帶領團隊完成了幾個項目?學習了哪些新技能?有哪些新突破?

推荐一款團隊能力提升“神器”給你——極客時間企業賬號。 Leader 使用 VIP 年卡,培養全局觀、提升綜合能力;團隊成員按需選課,針對性提高技術水平。雙十二來啦,現在購買 VIP 年卡立享 8 折優惠,掃碼了解詳情↓Flutter 1.12重磅發布:支持Web與macOS 19

Flutter 1.12重磅發布:支持Web與macOS 20