繼北京站 RTC Dev Meetup 技術沙龍的火爆之後，3月30日「RTC 開發者社群」在上海圓滿舉行了又一場技術沙龍。這次社群邀請到了四位演講人分享 Flutter 開發經驗，他們分別來自位元組跳動、聲網，以及另外兩家知名公司。
鄭宜東：如何優雅地 Flutter
鄭宜東表示，Flutter 目前的社群熱度很高。他在演講中對比了 React Native 與 Flutter 的架構。然後分析了他所在的團隊在利用 Flutter 開發 iOS、Android App 過程中的思考與經驗。
鄭宜東從社群角度來看。與 React Native 相比，Flutter 雖是後來者，但在 Github 資料上可以看到 Flutter 受到廣泛關注，並且更新、迭代速度很快。在掘金社群中，儘管關注 Flutter 的人不如 React Native 多，但社群內容量卻已經超過了它。這說明 Flutter 已經獲得了大多數的認可。
另一方面，Flutter 2019年的 Roadmap 中有很多項任務，其中比較重要的三條：
第一，Ease of Adoption，即接入現有專案。這是 Flutter 2019年的重點。在 2018年11月，Flutter 做了一次更新，模組化、類似於 Android 的專案管理方式，能更易於讓原生開發者體驗 Flutter。
第二，支援更多平臺。這是此前一直被詬病一點。說 Flutter 只支援 iOS 和 Android，其實並不準確。目前，Flutter 的規劃裡不僅有 iOS、Android，還有 Windows，甚至包括未來谷歌的新系統。
第三，Dynamic updates。在 iOS 方面不會去支援它。
鄭宜東隨後分享了他們在現有 App 中接入 Flutter 時的思考與經驗，包括渲染、持續整合等方面，並詳解了其中的架構設計。
張乾澤：Flutter實時音視訊技術實踐
聲網 Agora 高階架構師張乾澤在上海站分享了在 Flutter 上的實時音視訊技術實踐。他總結了調研、開發 Flutter 音視訊連麥外掛過程中的Flutter 渲染架構、視訊渲染方法等經驗。
首先，他介紹了一下 Flutter 的架構邏輯。如果比較熟悉 Flutter 的朋友可能知道，Flutter 的渲染方式與 React Native 最不一樣的地方就是它自己的一些原生控制元件上沒有利用系統本身提供的一些介面、控制元件，比如說 UI View 或 Android 上的一些 View。它自己裡面會建立一個 Layer Tree，Flutter 自己來進行渲染，它把這些資料或者渲染結果發到 Skia，由 Skia 引擎渲染處理為 GPU 資料，最後通過 GL 或 Vulkan 發給 GPU。
當我們在實現一個視訊通話應用的時候，我們可以利用 Flutter 自身元件來實現很多基本的功能，比如App 的一個腳手架，還有利用元件來畫出介面上的按鈕、選單欄。而視訊的編解碼、實時傳輸我們可以交給 Agora SDK 來解決。那麼關鍵的問題在於如何在 Flutter 上渲染視訊。
在 Flutter 裡有一個元件叫 Video Player，其中有一個 Texture Widget，我們可以通過 Native 端來提供視訊資料給這個 Texture，然後通過它來進行渲染。以 iOS 為例，iOS需要提供CVPixelBufferRef，它可以將渲染出來的資料供給Texture Widget，然後Texture Widget就可以把你提供的這些資料顯示出來。在我們傳輸資料的時候會需要將其與 TextureID 繫結，這樣一來，可以在同一個介面上出現多個 Texture，也就是說能顯示多個視訊通話視窗。在其中，聲網 SDK 的 AgoraVideoSink 介面裡可以提供一個回撥，這個回撥會把它收到的所有視訊資料通過你想要的格式傳給 Texture。
在 Flutter 1.0中新增的 PlatformView 也可以實現這個場景。PlatformView 在 iOS 和 Android 上分別叫做 UIKitView 和 AndroidView，它可以讓你直接建立一個 UIView。我們在Plugin 中有一個ViewFactory，它可以針對不同平臺返回一個你需要的 View。最後，在一個解析度設定較低的狀態下進行了視訊通話，分別對比了兩種實現方法的效能。結果顯示PlatformView的效能消耗跟直接用Native接我們SDK的效能比較相近。
符磊：淺談 Flutter 開發心得
Flutter 有兩種狀態控制元件：StatelessWidget、StatefulWidget，當我們的 UI 複雜、資料變化較多的時候，如何管理 Widget 就成了一個問題。位元組跳動 iOS 工程師符磊總結了此前 Flutter 落地專案中得出的 Widget 資料管理、Widget 的渲染優勢、非同步程式設計方面的經驗。在渲染方面，與前兩位演講人的內容不同，他深入講解了整體渲染的更新。
上圖是 Flutter 的 Render Pipeline，在觸發 Layout 後進行元件合成和資料管理進行佈局，佈局之後進行 Paint，這還不是 GPU 階段的渲染，而是對所有資料的整合。Flutter 的 UI Render 渲染流程如下圖所示。如果有一個State做出了變更，進行繪製，這樣將會浪費非常非常多的資源進行整體的重回過程。這其中就要涉及到如何進行優化的問題。
符磊在演講中詳細講解了Flutter 的非同步程式設計、多執行緒等方面的經驗。
盧召韋：解讀Flutter外掛
資深 Android 開發工程師盧召韋，曾在華為任研發工程師，也是社群上活躍的 Flutter 開發者。他在演講中分享 Flutter 外掛的編寫。編寫 Flutter 的外掛有幾個重要步驟：
-
建立MethodChannel物件，注意要固定唯一的通訊欄位。
-
Android 端接收資訊並做出相應的處理，這裡面需要注意的是Method Channel Handler、Method Call以及Result。
-
第三就是Dart程式碼獲取原生平臺封裝的相關函式，這裡重點我們一般都是通過非同步獲取相關的API。
-
工程程式碼裡面呼叫外掛裡的程式碼。
在演講中，他還分享了 Flutter與原生互動的過程，以及在開發 Flutter 外掛過程中需要注意的六大問題。
演講 PPT 及視訊回顧：點選這裡獲取
