昨天谷歌為在 Flutter Interact 上為我們帶來(lái)了 Flutter 1.12 ，這是 1.9.x 的版本在經(jīng)歷 6 次 hotfix 之后饰及，才帶來(lái)的 stable 大版本更新徽缚。該版本解決了 4,571 個(gè)報(bào)錯(cuò)实辑，合并了 1,905 份 pr尘奏，同時(shí)本次發(fā)布也是 Flutter 一年內(nèi)的第五個(gè)穩(wěn)定版本马昨。
結(jié)合本次 Flutter Interact 狠裹，可以總結(jié)出幾個(gè)關(guān)鍵詞是: Platform 虽界、 DartPad 、Spuernova 酪耳、AdobeXD浓恳、Hot UI 和 Layout Explorer 。
一碗暗、更多的平臺(tái)
本次 Flutter Interact 提出了讓開(kāi)發(fā)者更聚焦于精美的應(yīng)用開(kāi)發(fā)颈将，從以設(shè)備為中心轉(zhuǎn)變?yōu)橐詰?yīng)用為中心的開(kāi)發(fā)理念，F(xiàn)lutter 將幫助開(kāi)發(fā)者忽略 Android言疗、iOS晴圾、Web、PC 等不同平臺(tái)差異噪奄，如下圖所示是現(xiàn)場(chǎng)一套代碼同時(shí)調(diào)試 7 臺(tái)設(shè)備的演示死姚。
本次 Flutter 也開(kāi)始兌現(xiàn)當(dāng)初的承諾，目前 Web 的支持已經(jīng)發(fā)布到 Beta 分支勤篮，而 MacOS 的支持已經(jīng)發(fā)布到 Master 分支都毒。雖然進(jìn)度不算快，但是作為“白嫖黨”表示還是很開(kāi)心能看到有所推進(jìn)碰缔。
使用 Flutter Web 和 Flutter MacOS 需要通過(guò)如下命令行打開(kāi)配置账劲，并且執(zhí)行 flutter create xxxx 就可以創(chuàng)建帶有 Web 和 MacOS 的項(xiàng)目（如果已有項(xiàng)目也可以執(zhí)行 flutter create 補(bǔ)全），并且需要注意調(diào)試 MacOS 平臺(tái)應(yīng)用需要本地 Flutter SDK 要處于 master 分支金抡，如果僅測(cè)試 Web 可以使用 beta 分支瀑焦。
flutter config --enable-macos-desktop
flutter config --enable-web
///其他平臺(tái)的支持
flutter config --enable-linux-desktop
flutter config --enable-windows-desktop
最后可以通過(guò) run 或者 build 命令運(yùn)行和打包程序，同時(shí)需要注意這里提到的 linux 和 window 平臺(tái)目前還未合并到主項(xiàng)目中梗肝，如果想測(cè)試可在 Desktop-shells 查看對(duì)應(yīng)配置項(xiàng)目：flutter-desktop-embedding榛瓮。
///調(diào)試運(yùn)行
flutter run -d chrome
flutter run -d macOS
///打包
flutter build web
flutter build macOS
二、更多開(kāi)發(fā)工具
1巫击、DartPad
DartPad 是用于在線體驗(yàn) Dart 功能的平臺(tái)禀晓，而本次更新后 DartPad 也支持 Flutter 的在線編寫預(yù)覽精续，這代表著開(kāi)發(fā)者可以在沒(méi)有 idea 的情況下也能實(shí)時(shí)測(cè)試自己的 Flutter 代碼，算是補(bǔ)全了 Flutter 的在線用例測(cè)試匆绣。
DartPad 的官方地址：dartpad.dev 和國(guó)內(nèi)鏡像地址 dartpad.cn
2驻右、Spuernova
Spuernova 可以說(shuō)是本次 Flutter Interact 的亮點(diǎn)之一，通過(guò)導(dǎo)入設(shè)計(jì)師的 Sketch 文件就可以生成 Flutter 代碼崎淳，這無(wú)疑提升了 Flutter 的生產(chǎn)力和可想象空間堪夭，雖然這種生成代碼的方法并不罕見(jiàn)，完整實(shí)用程度有待考驗(yàn)拣凹，但是這也讓開(kāi)發(fā)者可以更聚焦于業(yè)務(wù)邏輯和操作邏輯森爽。
放心，這個(gè)坑不是谷歌 Flutter 團(tuán)隊(duì)開(kāi)的嚣镜，它屬于另外一家商業(yè)公司爬迟。
使用 Spuernova 可以從 https://supernova.io 下載 Supernova Studio ，之后需要注冊(cè)用戶信息（可能需要科學(xué)S網(wǎng)）菊匿，最后就可以看到如下圖所示的界面付呕。
在導(dǎo)入 Sketch 文件后可以看到設(shè)計(jì)師完成的界面效果，同時(shí)選中 "</>" 按鍵跌捆，可以在右側(cè)看到對(duì)應(yīng)的 Flutter 代碼徽职，左側(cè)可以看到對(duì)應(yīng)的層級(jí)設(shè)計(jì)，但是這時(shí)候的代碼看起來(lái)還比較簡(jiǎn)單和笨重佩厚，并且不具備交互能力姆钉。
如果進(jìn)一步配置，用戶需要在對(duì)應(yīng)的控件上抄瓦，使用右鍵的彈出框配置控件的功能潮瓶，比如 List、Button钙姊、TextField 等組件去 Convert 原有的控件毯辅，讓控件更新具備交互能力，同時(shí)還可以為控件配置布局屬性和動(dòng)畫(huà)效果等煞额。
當(dāng)然悉罕， Spuernova 并不是什么完全的公益項(xiàng)目，目前只有對(duì)于 Flutter 的簡(jiǎn)單支持上是免費(fèi)的立镶，其他項(xiàng)目支持還是處于收費(fèi)狀態(tài)。
另外類似的還有 AdobeXD类早， Adobe 的 Creative Cloud 添加了 Flutter 支持媚媒，只需一個(gè)插件，用戶就可以將 AdobeXD 導(dǎo)出到 Flutter涩僻，目前處于注冊(cè)參加優(yōu)先體驗(yàn)計(jì)劃 的進(jìn)度缭召。
3栈顷、Hot UI
Hot UI 就是大家盼星盼月的預(yù)覽功能，如下圖所示嵌巷，在 Android Studio 的 Flutter 插件中在開(kāi)發(fā) widget 開(kāi)發(fā)的過(guò)程中萄凤，直接在 IDE 的鏡像里進(jìn)行預(yù)覽并與之進(jìn)行交互。
在官方的 HotUI-Getting-Started-instructions 中可以看到相關(guān)的描述：This feature is currently experimental. To enable, go to Preferences > Languages & Frameworks > Flutter Then check "Enable Hot UI" under "Experiments". 目前該功能還處于實(shí)驗(yàn)階段搪哪，在 Android Studio 的設(shè)置中靡努，如圖所示底部勾選啟動(dòng)這個(gè)功能。
但是如下圖所示晓折，開(kāi)啟后會(huì)發(fā)現(xiàn)和官方宣傳的不一樣惑朦？因?yàn)槟壳邦A(yù)覽的 Screen mirror 處于 coming soon 的狀態(tài)。
現(xiàn)階段的 Hot UI 如下 GIF 所示胧沫，暫時(shí)只支持用戶動(dòng)態(tài)調(diào)試和配置控件的屬性等邏輯勒极，讓我們期待官方填坑吧团赏。
4、Layout Explorer
Layout Explorer 是另外實(shí)驗(yàn)性的布局調(diào)試模式梁肿，Layout Explorer 主要是用于幫助開(kāi)發(fā)者更直觀地適配屏幕和調(diào)試如 overflowed 等場(chǎng)景的問(wèn)題。
在最新的 Dart DevTools 工具添加了一個(gè)名為 Layout Explorer 的功能觅彰，它能夠以可視化的方式呈現(xiàn)應(yīng)用的布局信息吩蔑，從而讓檢查器可以更好地發(fā)揮功，同時(shí) Layout Explorer 不僅能以可視化的方式展現(xiàn)正在運(yùn)行的應(yīng)用中的 widget 布局缔莲，而且還允許以交互的方式更改布局選項(xiàng)哥纫。
啟動(dòng) Layout Explorer 同樣需要 Flutter SDK 處于 master 分支，然后在程序運(yùn)行之后痴奏，點(diǎn)擊 DevTools 在 chrome 打開(kāi)蛀骇，之后點(diǎn)擊最右側(cè)的按鍵進(jìn)入 Flutter 調(diào)試模式。
如下 GIF 所示读拆，當(dāng)選中的控件是具備 Flex 的支持時(shí)擅憔，可以看到有 Layout Explorer 的面板，在面板中可以動(dòng)態(tài)調(diào)整控件的顯示邏輯和控件的布局情況檐晕。
比如當(dāng)控件出現(xiàn)了 overflowed 暑诸，我們可以很直觀的看到問(wèn)題的根源并且進(jìn)行調(diào)整。
另外可以在 Layout Explorer 中動(dòng)態(tài)調(diào)整控件的 flex 等相關(guān)信息辟灰，實(shí)時(shí)預(yù)覽修改情況个榕。
三、Flutter SDK 改進(jìn)
Flutter SDK 相關(guān)的更新本次解決了 4,571 個(gè)報(bào)錯(cuò)芥喇，合并了 1,905 份 pr西采，同時(shí)包含了許多的新功能支持。
首先 Flutter 1.12 建議開(kāi)發(fā)者將 Android 項(xiàng)目遷移到 AndroidX继控，SDK 的瘦身械馆，增加了 google_fonts 字體的支持等胖眷。
Android 插件的改進(jìn) Android plugins APIs，相比起以前更為簡(jiǎn)單明了霹崎，分割了
FlutterPluginandMethodCallHandler,同時(shí)提供ActivityAware珊搀、ServiceAware作為獨(dú)立支持。iOS 13 深色模式,支持使用 darkTheme 設(shè)置尾菇，同時(shí)還增加了如
CupertinoContextMenu境析、CupertinoSlidingSegmentedControl、CupertinoAlertDialog错沽、CupertinoDatePicker等 iOS 風(fēng)格的控件支持簿晓。
new MaterialApp(
title: '',
navigatorKey: navigatorKey,
theme: model.themeData,
darkTheme: model.darkthemeData,
locale: model.locale,
Add-to-App 混合集成模式的進(jìn)一步的更新。
新增加了不兼容的
breaking change千埃，比如: PageView 啟用 RenderSliverFillViewport 憔儿、 WidgetsBinding 中的 attachRootWidget 被替換為 scheduleAttachRootWidget 、Allow gaps in the initial route放可、TextField's minimum height from 40 to 48 等需要開(kāi)發(fā)者注意重新適配的修改谒臼，更多可查閱 release-notes-1.12.13。增加了 MediaQuery.systemGestureInsets 支持 Android Q 的手勢(shì)導(dǎo)航耀里；增加了 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 可見(jiàn) release-notes-1.12.13
四趾徽、其他
本次 Flutter Interact 還推薦了 flutter-d-art 和
gskinner 等精美的開(kāi)源項(xiàng)目，同時(shí)
Flutter 本次也表示了將在未來(lái)優(yōu)化代碼的開(kāi)發(fā)模式翰守，而 Flutter 在不斷開(kāi)新坑的同時(shí)孵奶，也需要面對(duì)目前層出的問(wèn)題。
Flutter 過(guò)去的一年無(wú)疑是火熱的蜡峰，所以暴露的問(wèn)題也指數(shù)級(jí)出現(xiàn)了袁，比如最近開(kāi)發(fā)中就遇到了在斷網(wǎng)時(shí)加載圖后之后，再打開(kāi)網(wǎng)絡(luò)無(wú)法繼續(xù)顯示圖片的問(wèn)題湿颅。
不過(guò)既然是開(kāi)源項(xiàng)目载绿，“白嫖”之余也得多靠自己，上述問(wèn)題經(jīng)過(guò)查找后油航，在自定義的 ImageProvider 里圖片加載失敗時(shí)卢鹦，可以通過(guò)清除了 ImageCache 中的 PendingImage 來(lái)解決問(wèn)題，同時(shí)因?yàn)?Image 的封裝與 DecorationImage 的差異化，還需要對(duì) Image 的 didUpdateWidget 做二次處理才解決了問(wèn)題冀自。
說(shuō)這個(gè)問(wèn)題其實(shí)就是想表達(dá)開(kāi)源的意義，用一個(gè)框架不能夠只是坐享其成的心態(tài)秒啦，開(kāi)源的目的更是交流熬粗，不管什么框架都不可能盡善盡美，我們可以用更開(kāi)放的心態(tài)去嘗試和“批判”余境，而我們的崗位不就是解決這些問(wèn)題的么驻呐？
Flutter 文章匯總地址：
資源推薦
- Github ： https://github.com/CarGuo
- 開(kāi)源 Flutter 完整項(xiàng)目：https://github.com/CarGuo/GSYGithubAppFlutter
- 開(kāi)源 Flutter 多案例學(xué)習(xí)型項(xiàng)目: https://github.com/CarGuo/GSYFlutterDemo
- 開(kāi)源 Fluttre 實(shí)戰(zhàn)電子書(shū)項(xiàng)目：https://github.com/CarGuo/GSYFlutterBook
- 開(kāi)源 React Native 項(xiàng)目：https://github.com/CarGuo/GSYGithubApp
