昨天谷歌為在 Flutter Interact 上為我們帶來了 Flutter 1.12 ，這是 1.9.x 的版本在經歷 6 次 hotfix 之後，才帶來的 stable 大版本更新。該版本解決了 4,571 個報錯，合併了 1,905 份 pr，同時本次釋出也是 Flutter 一年內的第五個穩定版本。
結合本次 Flutter Interact ，可以總結出幾個關鍵詞是: Platform 、 DartPad 、Spuernova 、AdobeXD、Hot UI 和 Layout Explorer 。
一、更多的平臺
本次 Flutter Interact 提出了讓開發者更聚焦於精美的應用開發，從以裝置為中心轉變為以應用為中心的開發理念，Flutter 將幫助開發者忽略 Android、iOS、Web、PC 等不同平臺差異，如下圖所示是現場一套程式碼同時除錯 7 臺裝置的演示。
本次 Flutter 也開始兌現當初的承諾，目前 Web 的支援已經發布到 Beta 分支，而 MacOS 的支援已經發布到 Master 分支。雖然進度不算快，但是作為“白嫖黨”表示還是很開心能看到有所推進。
使用 Flutter Web 和 Flutter 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 命令執行和打包程式，同時需要注意這裡提到的 linux 和 window 平臺目前還未合併到主專案中，如果想測試可在 Desktop-shells 檢視對應配置專案：flutter-desktop-embedding。
///除錯執行
flutter run -d chrome
flutter run -d macOS
///打包
flutter build web
flutter build macos
複製程式碼
二、更多開發工具
1、DartPad
DartPad 是用於線上體驗 Dart 功能的平臺，而本次更新後 DartPad 也支援 Flutter 的線上編寫預覽，這代表著開發者可以在沒有 idea 的情況下也能實時測試自己的 Flutter 程式碼，算是補全了 Flutter 的線上用例測試。
DartPad 的官方地址：dartpad.dev 和國內映象地址 dartpad.cn
2、Spuernova
Spuernova 可以說是本次 Flutter Interact 的亮點之一，通過匯入設計師的 Sketch 檔案就可以生成 Flutter 程式碼，這無疑提升了 Flutter 的生產力和可想象空間，雖然這種生成程式碼的方法並不罕見，完整實用程度有待考驗，但是這也讓開發者可以更聚焦於業務邏輯和操作邏輯。
放心，這個坑不是谷歌 Flutter 團隊開的，它屬於另外一家商業公司。
使用 Spuernova 可以從 supernova.io 下載 Supernova Studio ，之後需要註冊使用者資訊（可能需要科學S網），最後就可以看到如下圖所示的介面。
在匯入 Sketch 檔案後可以看到設計師完成的介面效果，同時選中 "</>" 按鍵，可以在右側看到對應的 Flutter 程式碼，左側可以看到對應的層級設計，但是這時候的程式碼看起來還比較簡單和笨重，並且不具備互動能力。
如果進一步配置，使用者需要在對應的控制元件上，使用右鍵的彈出框配置控制元件的功能，比如 List、Button、TextField 等元件去 Convert 原有的控制元件，讓控制元件更新具備互動能力，同時還可以為控制元件配置佈局屬性和動畫效果等。
當然， Spuernova 並不是什麼完全的公益專案，目前只有對於 Flutter 的簡單支援上是免費的，其他專案支援還是處於收費狀態。
另外類似的還有 AdobeXD， Adobe 的 Creative Cloud 新增了 Flutter 支援，只需一個外掛，使用者就可以將 AdobeXD 匯出到 Flutter，目前處於註冊參加優先體驗計劃 的進度。
3、Hot UI
Hot UI 就是大家盼星盼月的預覽功能，如下圖所示，在 Android Studio 的 Flutter 外掛中在開發 widget 開發的過程中，直接在 IDE 的映象裡進行預覽並與之進行互動。
在官方的 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 的設定中，如圖所示底部勾選啟動這個功能。
但是如下圖所示，開啟後會發現和官方宣傳的不一樣？因為目前預覽的 Screen mirror 處於 coming soon 的狀態。
現階段的 Hot UI 如下 GIF 所示，暫時只支援使用者動態除錯和配置控制元件的屬性等邏輯，讓我們期待官方填坑吧。
4、Layout Explorer
Layout Explorer 是另外實驗性的佈局除錯模式，Layout Explorer 主要是用於幫助開發者更直觀地適配螢幕和除錯如 overflowed 等場景的問題。
在最新的 Dart DevTools 工具新增了一個名為 Layout Explorer 的功能，它能夠以視覺化的方式呈現應用的佈局資訊，從而讓檢查器可以更好地發揮功，同時 Layout Explorer 不僅能以視覺化的方式展現正在執行的應用中的 widget 佈局，而且還允許以互動的方式更改佈局選項。
啟動 Layout Explorer 同樣需要 Flutter SDK 處於 master 分支，然後在程式執行之後，點選 DevTools 在 chrome 開啟，之後點選最右側的按鍵進入 Flutter 除錯模式。
如下 GIF 所示，當選中的控制元件是具備 Flex 的支援時，可以看到有 Layout Explorer 的皮膚，在皮膚中可以動態調整控制元件的顯示邏輯和控制元件的佈局情況。
比如當控制元件出現了 overflowed ，我們可以很直觀的看到問題的根源並且進行調整。
另外可以在 Layout Explorer 中動態調整控制元件的 flex 等相關資訊，實時預覽修改情況。
三、Flutter SDK 改進
Flutter SDK 相關的更新本次解決了 4,571 個報錯，合併了 1,905 份 pr，同時包含了許多的新功能支援。
-
首先 Flutter 1.12 建議開發者將 Android 專案遷移到 AndroidX，SDK 的瘦身，增加了 google_fonts 字型的支援等。
-
Android 外掛的改進 Android plugins APIs，相比起以前更為簡單明瞭，分割了
FlutterPluginandMethodCallHandler,同時提供ActivityAware、ServiceAware作為獨立支援。 -
iOS 13 深色模式,支援使用 darkTheme 設定，同時還增加了如
CupertinoContextMenu、CupertinoSlidingSegmentedControl、CupertinoAlertDialog、CupertinoDatePicker等 iOS 風格的控制元件支援。
new MaterialApp(
title: '',
navigatorKey: navigatorKey,
theme: model.themeData,
darkTheme: model.darkthemeData,
locale: model.locale,
複製程式碼-
Add-to-App 混合整合模式的進一步的更新。
-
新增加了不相容的
breaking change，比如: PageView 啟用 RenderSliverFillViewport 、 WidgetsBinding 中的 attachRootWidget 被替換為 scheduleAttachRootWidget 、Allow gaps in the initial route、TextField's minimum height from 40 to 48 等需要開發者注意重新適配的修改，更多可查閱 release-notes-1.12.13。 -
增加了 MediaQuery.systemGestureInsets 支援 Android Q 的手勢導航；增加了 SliverIgnorePointer 、SliverOpacity、SliverAnimatedList 等控制元件支援；PageRouteBuilder 支援 fullscreenDialog。
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 在不斷開新坑的同時，也需要面對目前層出的問題。
Flutter 過去的一年無疑是火熱的，所以暴露的問題也指數級出現，比如最近開發中就遇到了在斷網時載入圖後之後，再開啟網路無法繼續顯示圖片的問題。
不過既然是開源專案，“白嫖”之餘也得多靠自己，上述問題經過查詢後，在自定義的 ImageProvider 裡圖片載入失敗時，可以通過清除了 ImageCache 中的 PendingImage 來解決問題，同時因為 Image 的封裝與 DecorationImage 的差異化，還需要對 Image 的 didUpdateWidget 做二次處理才解決了問題。
說這個問題其實就是想表達開源的意義，用一個框架不能夠只是坐享其成的心態，開源的目的更是交流，不管什麼框架都不可能盡善盡美，我們可以用更開放的心態去嘗試和“批判”，而我們的崗位不就是解決這些問題的麼？
Flutter 文章彙總地址：
資源推薦
- Github ： github.com/CarGuo
- 開源 Flutter 完整專案：github.com/CarGuo/GSYG…
- 開源 Flutter 多案例學習型專案: github.com/CarGuo/GSYF…
- 開源 Fluttre 實戰電子書專案：github.com/CarGuo/GSYF…
- 開源 React Native 專案：github.com/CarGuo/GSYG…
