“浅谈” 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 插件过程中需要注意的六大问题。

本文转载自公众号声网 Agora（ID：shengwang-agora）。

原文链接：

https://mp.weixin.qq.com/s/X3zDFKVkBxNd2lzM8jxoHQ