「淺談」 Flutter 應用落地心得

繼北京站 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 渲染機制

當咱們在實現一個視頻通話應用的時候，咱們能夠利用 Flutter 自身組件來實現不少基本的功能，好比App 的一個腳手架，還有利用組件來畫出界面上的按鈕、菜單欄。而視頻的編解碼、實時傳輸咱們能夠交給 Agora SDK 來解決。那麼關鍵的問題在於如何在 Flutter 上渲染視頻。

在 Flutter 裏有一個組件叫 Video Player，其中有一個 Texture Widget，咱們能夠經過 Native 端來提供視頻數據給這個 Texture，而後經過它來進行渲染。以 iOS 爲例，iOS須要提供CVPixelBufferRef，它能夠將渲染出來的數據供給Texture Widget，而後Texture Widget就能夠把你提供的這些數據顯示出來。在咱們傳輸數據的時候會須要將其與 TextureID 綁定，這樣一來，能夠在同一個界面上出現多個 Texture，也就是說能顯示多個視頻通話窗口。在其中，聲網 SDK 的 AgoraVideoSink 接口裏能夠提供一個回調，這個回調會把它收到的全部視頻數據經過你想要的格式傳給 Texture。

圖：iOS 的渲染

在 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 的插件有幾個重要步驟：

1. 建立MethodChannel對象，注意要固定惟一的通訊字段。

2. Android 端接收信息並作出相應的處理，這裏面須要注意的是Method Channel Handler、Method Call以及Result。

3. 第三就是Dart代碼獲取原平生臺封裝的相關函數，這裏重點咱們通常都是經過異步獲取相關的API。

4. 工程代碼裏面調用插件裏的代碼。

在演講中，他還分享了 Flutter與原生交互的過程，以及在開發 Flutter 插件過程當中須要注意的六大問題。

---

演講 PPT 及視頻回顧：點擊這裏獲取