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視覺互動方面。
一、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
二、編譯器和開發工具
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臺裝置，獲得了雷鳴般的掌聲。
三、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那些事】，乾貨等你來拿。