FlutterInteract的Flutter1.12大進化和回顧

NO IMAGE

昨天谷歌為在 Flutter Interact 上為我們帶來了 Flutter 1.12 ,這是 1.9.x 的版本在經歷 6 次 hotfix 之後,才帶來的 stable 大版本更新。該版本解決了 4,571 個報錯,合併了 1,905 份 pr,同時本次發佈也是 Flutter 一年內的第五個穩定版本。

結合本次 Flutter Interact ,可以總結出幾個關鍵詞是: PlatformDartPadSpuernovaAdobeXDHot UILayout Explorer

FlutterInteract的Flutter1.12大進化和回顧

一、更多的平臺

本次 Flutter Interact 提出了讓開發者更聚焦於精美的應用開發,從以設備為中心轉變為以應用為中心的開發理念,Flutter 將幫助開發者忽略 Android、iOS、Web、PC 等不同平臺差異,如下圖所示是現場一套代碼同時調試 7 臺設備的演示。

本次 Flutter 也開始兌現當初的承諾,目前 Web 的支持已經發布到 Beta 分支,而 MacOS 的支持已經發布到 Master 分支。雖然進度不算快,但是作為“白嫖黨”表示還是很開心能看到有所推進。

FlutterInteract的Flutter1.12大進化和回顧

使用 Flutter WebFlutter MacOS 需要通過如下命令行打開配置,並且執行 flutter create xxxx 就可以創建帶有 Web 和 MacOS 的項目(如果已有項目也可以執行 flutter create 補全),並且需要注意調試 MacOS 平臺應用需要本地 Flutter SDK 要處於 master 分支,如果僅測試 Web 可以使用 beta 分支。

flutter config --enable-macos-desktop
flutter config --enable-web
///其他平臺的支持
flutter config --enable-linux-desktop
flutter config --enable-windows-desktop

最後可以通過 run 或者 build 命令運行和打包程序,同時需要注意這裡提到的 linuxwindow 平臺目前還未合併到主項目中,如果想測試可在 Desktop-shells 查看對應配置項目:flutter-desktop-embedding

///調試運行
flutter run -d chrome
flutter run -d macOS
///打包
flutter build web 
flutter build macos

FlutterInteract的Flutter1.12大進化和回顧

二、更多開發工具

1、DartPad

DartPad 是用於在線體驗 Dart 功能的平臺,而本次更新後 DartPad 也支持 Flutter 的在線編寫預覽,這代表著開發者可以在沒有 idea 的情況下也能實時測試自己的 Flutter 代碼,算是補全了 Flutter 的在線用例測試。

DartPad 的官方地址:dartpad.dev 和國內鏡像地址 dartpad.cn

FlutterInteract的Flutter1.12大進化和回顧

2、Spuernova

Spuernova 可以說是本次 Flutter Interact 的亮點之一,通過導入設計師的 Sketch 文件就可以生成 Flutter 代碼,這無疑提升了 Flutter 的生產力和可想象空間,雖然這種生成代碼的方法並不罕見,完整實用程度有待考驗,但是這也讓開發者可以更聚焦於業務邏輯和操作邏輯。

放心,這個坑不是谷歌 Flutter 團隊開的,它屬於另外一家商業公司。

使用 Spuernova 可以從 supernova.io 下載 Supernova Studio ,之後需要註冊用戶信息(可能需要科學S網),最後就可以看到如下圖所示的界面。

FlutterInteract的Flutter1.12大進化和回顧

在導入 Sketch 文件後可以看到設計師完成的界面效果,同時選中 "</>" 按鍵,可以在右側看到對應的 Flutter 代碼,左側可以看到對應的層級設計,但是這時候的代碼看起來還比較簡單和笨重,並且不具備交互能力。

FlutterInteract的Flutter1.12大進化和回顧

如果進一步配置,用戶需要在對應的控件上,使用右鍵的彈出框配置控件的功能,比如 ListButtonTextField 等組件去 Convert 原有的控件,讓控件更新具備交互能力,同時還可以為控件配置佈局屬性和動畫效果等。

FlutterInteract的Flutter1.12大進化和回顧

當然, Spuernova 並不是什麼完全的公益項目,目前只有對於 Flutter 的簡單支持上是免費的,其他項目支持還是處於收費狀態。

FlutterInteract的Flutter1.12大進化和回顧

另外類似的還有 AdobeXD, Adobe 的 Creative Cloud 添加了 Flutter 支持,只需一個插件,用戶就可以將 AdobeXD 導出到 Flutter,目前處於註冊參加優先體驗計劃 的進度。

FlutterInteract的Flutter1.12大進化和回顧

3、Hot UI

Hot UI 就是大家盼星盼月的預覽功能,如下圖所示,在 Android Studio 的 Flutter 插件中在開發 widget 開發的過程中,直接在 IDE 的鏡像裡進行預覽並與之進行交互。

FlutterInteract的Flutter1.12大進化和回顧

在官方的 HotUI-Getting-Started-instructions 中可以看到相關的描述:This feature is currently experimental. To enable, go to Preferences > Languages & Frameworks > Flutter Then check “Enable Hot UI” under “Experiments”. 目前該功能還處於實驗階段,在 Android Studio 的設置中,如圖所示底部勾選啟動這個功能。

FlutterInteract的Flutter1.12大進化和回顧

但是如下圖所示,開啟後會發現和官方宣傳的不一樣?因為目前預覽的 Screen mirror 處於 coming soon 的狀態。

FlutterInteract的Flutter1.12大進化和回顧

現階段的 Hot UI 如下 GIF 所示,暫時只支持用戶動態調試和配置控件的屬性等邏輯,讓我們期待官方填坑吧。

FlutterInteract的Flutter1.12大進化和回顧

4、Layout Explorer

Layout Explorer 是另外實驗性的佈局調試模式,Layout Explorer 主要是用於幫助開發者更直觀地適配屏幕和調試如 overflowed 等場景的問題。

在最新的 Dart DevTools 工具添加了一個名為 Layout Explorer 的功能,它能夠以可視化的方式呈現應用的佈局信息,從而讓檢查器可以更好地發揮功,同時 Layout Explorer 不僅能以可視化的方式展現正在運行的應用中的 widget 佈局,而且還允許以交互的方式更改佈局選項。

FlutterInteract的Flutter1.12大進化和回顧

啟動 Layout Explorer 同樣需要 Flutter SDK 處於 master 分支,然後在程序運行之後,點擊 DevTools 在 chrome 打開,之後點擊最右側的按鍵進入 Flutter 調試模式。

FlutterInteract的Flutter1.12大進化和回顧

如下 GIF 所示,當選中的控件是具備 Flex 的支持時,可以看到有 Layout Explorer 的面板,在面板中可以動態調整控件的顯示邏輯和控件的佈局情況。

FlutterInteract的Flutter1.12大進化和回顧

比如當控件出現了 overflowed ,我們可以很直觀的看到問題的根源並且進行調整。

FlutterInteract的Flutter1.12大進化和回顧

另外可以在 Layout Explorer 中動態調整控件的 flex 等相關信息,實時預覽修改情況。

FlutterInteract的Flutter1.12大進化和回顧

三、Flutter SDK 改進

Flutter SDK 相關的更新本次解決了 4,571 個報錯,合併了 1,905 份 pr,同時包含了許多的新功能支持。

  • 首先 Flutter 1.12 建議開發者將 Android 項目遷移到 AndroidX,SDK 的瘦身,增加了 google_fonts 字體的支持等。

  • Android 插件的改進 Android plugins APIs,相比起以前更為簡單明瞭,分割了 FlutterPlugin and MethodCallHandler ,同時提供 ActivityAwareServiceAware 作為獨立支持。

  • iOS 13 深色模式,支持使用 darkTheme 設置,同時還增加了如 CupertinoContextMenuCupertinoSlidingSegmentedControlCupertinoAlertDialogCupertinoDatePicker 等 iOS 風格的控件支持。

 new MaterialApp(
title: '',
navigatorKey: navigatorKey,
theme: model.themeData,
darkTheme: model.darkthemeData,
locale: model.locale,
extension ExtendsFun on String {
int parseInt() {
return int.parse(this);
}  double parseDouble() {
return double.parse(this);
}
}
main() {
int i = '42'.parseInt();
print(i);
}

更多完整的 release-notes 可見 release-notes-1.12.13

四、其他

本次 Flutter Interact 還推薦了 flutter-d-art
gskinner 等精美的開源項目,同時
Flutter 本次也表示了將在未來優化代碼的開發模式,而 Flutter 在不斷開新坑的同時,也需要面對目前層出的問題。

FlutterInteract的Flutter1.12大進化和回顧

FlutterInteract的Flutter1.12大進化和回顧

Flutter 過去的一年無疑是火熱的,所以暴露的問題也指數級出現,比如最近開發中就遇到了在斷網時加載圖後之後,再打開網絡無法繼續顯示圖片的問題。

不過既然是開源項目,“白嫖”之餘也得多靠自己,上述問題經過查找後,在自定義的 ImageProvider 裡圖片加載失敗時,可以通過清除了 ImageCache 中的 PendingImage 來解決問題,同時因為 Image 的封裝與 DecorationImage 的差異化,還需要對 ImagedidUpdateWidget 做二次處理才解決了問題。

說這個問題其實就是想表達開源的意義,用一個框架不能夠只是坐享其成的心態,開源的目的更是交流,不管什麼框架都不可能盡善盡美,我們可以用更開放的心態去嘗試和“批判”,而我們的崗位不就是解決這些問題的麼?

Flutter 文章彙總地址:

Flutter 完整實戰實戰系列文章專欄

Flutter 番外的世界系列文章專欄

資源推薦

FlutterInteract的Flutter1.12大進化和回顧

相關文章

Filddler抓包

小程序雲開發(實現網頁端)

java入門002~jdk8window版32位64位Mac版64位安裝包

全網最詳bpmn.js教材自定義renderer篇