“浅谈” 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 及视频回顾：点击这里获取