Flutter現支持Web和桌面，一躍成爲前沿大一統框架

2019年的這一年裏，Flutter進展了不少，相繼推出了Flutter，Flutter Web，Flutter Desktop以及相關配置插件和工具的完善。在Flutter團隊和社區的努力下，Flutter正在不斷的完善的愈來愈厲害。Flutter已經發展爲Mobile、Web、Desktop的全平臺的工具。在12月12號的Flutter Interact2019大會上，發佈了Flutter1.12最新穩定版本以及相關產品，這是迄今爲止Flutter的發行版中最大的發行版本，來自188個貢獻者，關閉了4,571個issues，合併了1,905個PR。這一次的Flutter框架和工具都有大量加強功能。

這是Flutter Interact2019大會最完整最全面的分析報道，這篇文章花了我一個晚上通宵的研究，每個工具花了時間研究和分析，最終寫出了這篇詳細的文章。

做者寫文章不容易，以爲好看的話，點個贊支持一下吧，謝謝你們。

---

此次Flutter Interact大會上，Flutter1.12正式版本發佈了，除此以外，這一次發佈會上也帶來了不少新的東西，根據內容相關性，我把它們主要分紅了三個大類：Flutter框架體系、編輯器和開發工具、UI視覺交互方面。

---

1、Flutter體系框架

Flutter框架體系除了Flutter自己以外，此次發佈了Flutter Web Beta版本，以及Flutter Desktop macOS預覽版本，拓展了Flutter的應用領域。

1.1 Flutter1.12正式版發佈

此版本包含視覺更新，主要用於支持iOS 13，包括完整實現的黑夜模式，新的Cupertino小部件，另外多個UX作了調整，還增長了Flutter添加到native應用的新功能，主要有如下這些功能的更新：

★ 可用的iOS 13黑夜模式：在Flutter1.12中，最大的變化就是對iOS13的支持，這次更新能夠在Cupertino組件上使用完整的黑夜模式。暗模式支持不只是換掉背景顏色，並且還能夠調整其他顏色以達到理想的視覺效果。

★ Cupertino組件的變動：

新增兩個組件：CupertinoContextMenu和CupertinoSlidingSegmentedControl，

爲了更像原生iOS13的UI表現，此次更新們改進了ScrollBar的保真度，提供了自適應的CupertinoAlertDialog的padding值，並在CupertinoDatePicker上容許設置mix date或max date的日期限制。

★ 支持「Add-to-App」功能：這個放到後面的「Android Studio裏面具體講解。

★ 包括AndroidX：如今，全部Flutter項目都使用AndroidX支持，所以您再也不須要處理全部由於AndroidX而致使的錯誤！

★ Google字體支持：再也不須要在應用程序中下載和添加字體，而無需pubspec.yaml。使用Flutter Google字體插件，您能夠在Dart代碼中直接使用您喜歡的字體！

★ Flutter Galley： Flutter Gallery應用程序已徹底更新，所以您能夠查找新窗口小部件和功能的代碼庫，並經過在首選平臺上運行來嘗試。

★ 組件的新增和更新變化：主要包括SliverOpacity小部件，SliverAnimatedList和爲SliverAppBar配置拉伸效果的功能，詳細的變化以下所示：

添加MediaQuery.systemGestureInset爲了支持Android Q.
默認更新ToggleButtons約束並添加新的約束參數.
在PageRouteBuilder中添加fullscreenDialog參數.
實現了DropdownButton.selectedItemBuilder.
Expose API —— 用於調整圖像緩存的大小.
SliverAppBar具備回調功能和FlexibleSpaceBar支持的可配置超滾動拉伸.
Re-landing SliverAnimatedList.
在showDialog和showGeneralDialog中添加navigator功能.
FadeInImage支持cacheWidth和cacheHeight.
新增SliverOpacity.
新增SliverIgnorePointer.
使用RenderSliverPadding插入SliverFillViewport.
複製代碼

★ 新增黃金文件測試(GoldenFile)：「黃金圖像」術語指的是主圖像文件，也就是你選擇要進行測試的組件，狀態，應用程序或其餘可視表示形式的真實呈現。在Flutter 1.12中，新增GoldenFileComparator和LocalFileComparator類的實現，這些類按像素而不是位進行比較，從而消除了false positives。這些新的實現突出顯示了視覺上的差別，以便黃金圖像和測試中的更新之間存在差別時能夠清楚地看到它們。

具體用法能夠查看： api.flutter.dev/flutter/flu…

1.2 Flutter Web Beta版發佈

具體的請查看我前面的文章介紹：Flutter Web Beta版本終於發佈了，可用於開發正式項目了

1.3 Flutter Desktop Alpha版本發佈

Flutter For Desktop在MacOS中如今處於Alpha狀態。Flutter Gallery應用程序如今也支持桌面了。此外，鍵盤的操做性等還有不少方面都有很大的改進。

macOS alpha版本的flutter gallery也獲得了支持：

macOS alpha表明Flutter對桌面的支持邁出了一大步，包括新的DataTree和Split示例窗口小部件，以及移植到macOS的多個插件，對在發佈和配置模式下構建的支持以及大大簡化的工具介紹。若是您是從開發人員或使用的是master分支，則能夠經過如下命令啓用macOS桌面支持來訪問macOS工具：flutter config — enable-macos-desktop

在macOS上建立Flutter桌面項目就像建立任何其餘新的Flutter項目同樣，使用 flutter create 便可。

除了工具支持以外，Flutter團隊還一直在致力於適合桌面大小的應用程序的密度。移動應用程序須要相對較大的控件來適應觸摸交互，而在桌面大小的設備上，用戶更有可能使用鼠標。

爲了改善Flutter桌面應用程序的體驗，咱們在鍵盤導航和鍵盤訪問方面作了不少工做，包括：

將修改器鍵與鍵盤事件同步。
打開下拉菜單時管理項目選擇。
添加一個方便訪問的主要焦點。
添加鍵盤導航，懸停和開關快捷方式。
複選框和單選按鈕。
自動滾動以使聚焦的項目保持可見。
基於鍵盤快捷鍵的滾動。
一個用於處理焦點和懸停的新小部件。
重寫的複製/粘貼和鍵盤選擇。
下拉菜單的鍵盤導航。
視覺密度支持。
添加macOS功能鍵支持。
複製代碼

除了Flutter Gallery示例以外，咱們還建議使用新的Photos Search示例，地址以下： github.com/flutter/sam…

該示例展現了不少桌面方面的優勢，包括鍵盤處理，新的小部件密度，新的插件和新的小部件。更多有關Flutter For Desktop的信息能夠查看官方網站：flutter.dev/desktop

---

2、編譯器和開發工具

Flutter的編譯工具和開發工具這次也有重大升級和更新。大概有這些內容：Android Studio工具裏面支持把Flutter添加到原生的應用程序中的「Add-to-App"。基於IntelliJ的加強型IDE（具備咱們稱爲「 Hot UI」的新功能的預覽）。DartPad新版本支持Flutter。Dart DevTools預覽版，具備新的視覺佈局視圖的加強型，可在同時進行多設備調試的功能。Visual Studio Code改進了Android的構建過程，並更好地支持了在測試運行之間發現渲染小部件中的差別。Dart 2.7正式版的發佈。

具體講解請看下文介紹：

2.1 Dart2.7正式版發佈

★ 1.Dart 2.7添加了強大語言新功能：擴展方法。這些使你可以向任何類型（甚至是你沒法控制的類型）添加新功能，並具備常規方法調用的簡潔性和自動化。

★ 2.安全字符串處理(包括emoji)：

Dart的標準String類使用UTF-16編碼。這是編程語言中的常見選擇，尤爲是那些支持在設備和Web上本地運行的語言。

在使用字符串時，一般沒必要擔憂字符和代碼點。若是要作的只是接收，傳遞整個字符串，則內部編碼是透明的。可是，若是須要遍歷字符串的字符或操縱字符串的內容，則可能會遇到麻煩。爲此，Dart 2.7引入了一個新的庫 「characters」，用於處理這種狀況。該軟件包支持將字符串視爲用戶感知的字符序列，也稱爲Unicode 字形簇。使用「characters」庫，咱們能夠經過對縮短文本的代碼進行少許更改來修復代碼。另外也支持emoji表情。

★ 3.支持空安全功能，不過目前是預覽版階段。

2.2 DartPad升級了

DartPad新版本支持Flutter了，你無需安裝任何東西就可使用Dart，這是一個在線網站，你看體驗裏面帶有的幾個Demo程序，並可在右邊看到預覽效果。

至此，Dartpad至此純Dart程序，Web程序，以及Flutter程序了，能夠說Dartpad已經很不錯了，不過部分簡單的頁面功能能夠它體驗一下，複雜的應用程序它是沒法完成的，須要咱們用開發工具編寫才行。

2.3 Dart Dev Tools

Dart Dev Tools如今有預覽版了，DevTools是Dart和Flutter的一套性能和調試工具，更好玩的是Dart Dev Tools是使用Flutter編寫的，是否是很神奇，是否是感覺到了Dart和Flutter的強大之處了？你一直覺得這種調試工具基本都是C++或者.net什麼的寫的，沒想到是用Flutter寫的吧？厲害了個人哥。

Dart Dev Tools是開源的，github地址：github.com/flutter/dev…

有了Dart Dev Tools，你能夠進行如下操做：

◆ 檢查UI：檢查Flutter應用的UI佈局和狀態。
◆ 查性能：在Flutter應用中診斷UI垃圾性能問題。
◆ 源碼調試：Flutter或Dart命令行應用程序的源代碼級調試。
◆ 調試內存：在Flutter或Dart命令行應用程序中調試內存問題。
◆ 查看日誌：查看有關正在運行的Flutter或Dart命令行應用程序的常規日誌和診斷信息。
複製代碼

這裏有個新出來的功能要特別說明一下，它就是：Layout Explorer。能夠用它查看組件樹，讓你更好地瞭解Flutter佈局。目前，「Layout Explorer」功能僅支持瀏覽Flex佈局，但未來可能會擴展到其餘類型的佈局。

首先你須要使用Flutter 1.12.16或更高版本才能夠支持Layout Explorer的功能，選擇一個Flex(Row 、Column和Flex等)組件或Flex組件的子組件，而後會在「Details Tree旁邊看到一個「Layout Explorer」選項。點擊它就會打開佈局資源管理器的功能。

Layout Explorer可以可視化的顯示Flex小部件及其子組件的佈局方式，可以識別水平軸的對齊方式和交叉軸的對齊方式，還支持flex係數，佈局約束等。若是屬性有多個候選項，那麼你能夠經過下拉列表修改值。好比如下就是修改對齊方向的屬性的示例圖，你會發現每一個更改就會顯示出可視化的效果圖，而且在你的設備上也會同步顯示更改的效果。這種方式不會修改你的源代碼，他會在熱重載時恢復。

Layout Explorer還會顯示違反佈局約束和渲染溢出錯誤的狀況。違反的佈局約束顯示爲紅色，而且在運行中的設備上會以標準的「黃色膠帶」的樣子顯示溢出錯誤。具體使用效果以下圖所示：

2.4 Android Studio支持「Add-to-App」

就是把Flutter添加到原生的應用程序中。好比新建模塊時，能夠選擇「Flutter Module」，添加一個Flutter Module。

此功能的完善得益於如下這些功能的實現：

★ 1.穩定了Java，Kotlin，Objective-C和Swift中用於平臺集成的API，包括一組適用於Android的新API。

有關更改的詳細信息，請參見Android項目遷移文檔： github.com/flutter/flu…

★ 2.添加了對在嵌入的Flutter Module中使用插件的支持。

★ 3.經過Android AAR和iOS提供了額外的集成機制，爲了更好地與現有構建系統兼容。

★ 4.從新設計了命令行工具的flutter attach」機制，這樣一來讓VSCode和IntelliJ插件上能夠輕鬆綁定正在運行的Flutter Module上進行調試，DevTools和熱重載（Hot Reload）。

2.5 Hot UI（佈局可視化工具）

你能夠在Flutter的IntelliJ / Android Studio插件中找到這個新功能，目前仍是預覽版。而後你能夠在構建組件時能夠直接在IDE中查看它們並與之交互，你能夠在「HOT UI"上面更改你的組件的屬性，而後它會直接在預覽界面及你的設備上面更新。

使用動態圖解以下圖所示：

2.6 VSCode多設備同時調試

你能夠同時在多個設備和平臺上運行Flutter代碼，你還能夠在Dart代碼上設置一個斷點，並能夠在多個設備上進行斷掉調試，若是代碼修改了，當你啓動熱重載，你就能夠看到哪一個設備被激活了並進行斷點調試。在大會的現場，Flutter團隊使用了7臺設備鏈接了Mac，並進行了現場同時調試這7臺設備，得到了雷鳴般的掌聲。

---

3、UI視覺交互方面

Flutter今年的活動主要集中在創意技術人員，原型設計師，交互式設計師和視覺編碼人員。構建Flutter的一個核心動機是多平臺開發不該該在視覺質量上有所妥協。將Flutter視爲進行創意表達和探索的畫布，由於Flutter消除了面向視覺的開發人員常常面臨的許多限制。Flutter有狀態的熱重裝功能使您能夠輕鬆進行更改並實時查看結果，而且使用Flutter繪製的每一個像素，您能夠將UI，圖形內容，文本和視頻與自定義動畫和變換混合在一塊兒。

Flutter團隊特別受到了數字藝術家Robert Felker的啓發，Robert Felker用Flutter進行了一系列生成藝術的探索，將幾何，紋理和光線巧妙地結合在一塊兒，它能夠說明Flutter的表達能力以及藝術創造力，下面的圖像是用少於60行的Dart代碼生成的，是否是美爆了？！

源碼請查看：github.com/Solido/flut…

接下來看看本次活動現場發佈的一些UI視覺交互方面的產品和工具備哪些：

3.1 Nevercode(雲端iOS調試測試Flutter代碼)

Nevercode具備一整套全新功能，包括名爲Remote Mac的Visual Studio Code插件。Remote Mac擴展程序可以讓您直接鏈接到它們託管在雲中的Mac，以測試您的iOS和macOS Flutter代碼。

具體的能夠查看：

marketplace.visualstudio.com/items?itemN…

3.2 Supernova

Supernova已將Flutter集成到其設計和原型製做工具中，並具備動畫支持，Material Design集成以及專爲Flutter設計的更新界面。Supernova團隊還宣佈了一種基於瀏覽器的新工具Supernova Cloud，該工具徹底由Flutter Web構建而成。

生成原型圖的同時還會自動生成Flutter代碼，而且支持熱重載，能夠導入到Andoid Studio中運行。

3.3 Rive全新升級(前身是Flare)

Rive（以前是2Dimensions，曾發佈Flare圖形工具）宣佈將他們的公司名稱和產品整合爲一個品牌。他們推出了新公司和產品名稱Rive，以及許多新產品功能。Rive中最顯着的功能也許是支持導入使用Adobe After Effects建立的Lottie文件，從而將Flutter更深刻地集成到現有的動畫內容工做流程中。Rive如今支持實時動態分層效果，例如陰影，內部陰影，發光，模糊和遮罩。

Rive消除了在代碼中從新建立設計和動畫的須要，從而大大簡化了設計人員到開發人員的交接過程。這意味着設計師能夠隨時進行迭代和更改。因爲Rive能夠輸出直接與Flutter集成的真實的資產文件，而不只僅是MP4視頻或GIF圖像，所以Rive容許您建立複雜而動態的交互，遊戲角色，動畫圖標和內置屏幕。

3.4 Adode XD Flutter插件(自動生成Flutter代碼)

Adobe宣佈了Flutter在Creative Cloud中的支持，該插件帶有一個將設計從Adobe XD導出到Flutter的插件。Adobe XD是Adobe的用戶體驗設計平臺，它使產品設計團隊能夠把設計和原型圖變成移動端，Web，臺式機以及其餘產品的代碼，這是一種全新的體驗。使用XD-to-Flutter插件，你能夠直接將UI導出到Dart代碼它還支持熱重載（Hot Reload），當你在Adobe Ex中進行更改並保存時，你能夠在模擬器或設備上直接看到更改。除此以外，你還能夠給組件設置參數，並容許其在Widget中獲取參數。所以，在開發過程當中，您能夠在調用逐漸並對其進行更改時提供參數。這個吊炸天有木有？！！！

XD to Flutter插件將於明年年初以開源形式提供。您能夠找到有關XD to Flutter的更多信息，並在Adobe網站上註冊體驗，

地址以下: xd.adobelanding.com/xd-to-flutt…

---

這篇文章花了我一個晚上通宵的研究，每個工具花了時間研究和分析，最終寫出了這篇詳細的文章。做者寫文章不容易，以爲好看的話，點個贊支持一下吧，謝謝你們。

更多關於Flutter精彩乾貨，歡迎關注公衆號【Flutter那些事】，乾貨等你來拿。