Flutter Interact 的 Flutter 1.12 大進化和回顧

昨天谷歌爲在 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 。

1、更多的平臺

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

複製代碼

2、更多開發工具

一、DartPad

DartPad 是用於在線體驗 Dart 功能的平臺，而本次更新後 DartPad 也支持 Flutter 的在線編寫預覽，這表明着開發者能夠在沒有 idea 的狀況下也能實時測試本身的 Flutter 代碼，算是補全了 Flutter 的在線用例測試。

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

二、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，目前處於註冊參加優先體驗計劃 的進度。

三、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 所示，暫時只支持用戶動態調試和配置控件的屬性等邏輯，讓咱們期待官方填坑吧。

四、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 等相關信息，實時預覽修改狀況。

3、Flutter SDK 改進

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

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

• Android 插件的改進 Android plugins APIs，相比起之前更爲簡單明瞭，分割了 FlutterPlugin and MethodCallHandler ,同時提供 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。

• Dart 2.7 的發佈，支持擴展方法。

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

4、其餘

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

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

不過既然是開源項目，「白嫖」之餘也得多靠本身，上述問題通過查找後，在自定義的 ImageProvider 裏圖片加載失敗時，能夠經過清除了 ImageCache 中的 PendingImage 來解決問題，同時由於 Image 的封裝與 DecorationImage 的差別化，還須要對 Image 的 didUpdateWidget 作二次處理才解決了問題。

說這個問題其實就是想表達開源的意義，用一個框架不可以只是不勞而獲的心態，開源的目的更是交流，無論什麼框架都不可能盡善盡美，咱們能夠用更開放的心態去嘗試和「批判」，而咱們的崗位不就是解決這些問題的麼？

Flutter 文章彙總地址：

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

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…