RTC Dev Meetup：Flutter 开发实战与前景展望（一）

大家好，我是郭树煜，Github GSY 系列开源项目的作者，系列包括有 GSYVideoPlayer 、GSYGitGithubApp(Flutter\ReactNative\Kotlin\Weex)四大版本，目前总 star 在 17k+ 左右，主要活跃在掘金社区，id 是恋猫的小郭，主要专栏有《Flutter 完整开发实战详解》系列等，平时工作负责移动端项目的开发，工作经历从 Android 到 React Native 、Weex 再到如今的 Flutter ，期间也参与过 React 、 Vue 、小程序等相关的开发，算是一个大前端的选手吧。

这次主要是给大家分享 Flutter 相关的内容，主要涉及做一些实战和科普性质的内容。

一、移动开发的现状

恰逢最近谷歌 IO 大会结束，大会后也在线上线下和大家有过交流，总结了下大家最关系的问题有：

1、谷歌在 Kotlin-First 的口号下又推广 Dart + Flutter 冲突吗？

这个问题算是被问得最多的一个，先说观点：我个人认为其实这并不冲突，因为有个 误区就是认为跨平台开发就可以抛弃原生开发！

如果从事过跨平台开发的同学应该知道，平台提供的功能向来是有限的，而面对产品经理的各种 “点歪技能树” 的需求，很多时候你是需要基于框架外提供支持，常见的就是 混合开发或者原生插件支持 。

所以这里我表达的是，目前 Kotlin 和 Dart 更多是相辅相成 ，而一旦业务复杂度到一定程度，跨平台框架还可能存在降低工作效率的问题，比如针对新需求，需要重复开发 Android/IOS 的原生插件做支持，这也是 Aribnb 曾经选择放弃 ReactNative 的原因之一。

与我而言，跨平台的意义在于解决的是端逻辑的统一 ，至少避免了逻辑重复实现，或者 iOS 和 Android 之间争论 谁对谁错 的问题，甚至可以统一到 web 端等等。

2、React Native 和 Flutter 之间的对比

Flutter 作为后来者，难免会被用来和 ReactNative 进行对比，在这个万物皆是 JS 的时代， Dart 和 Flutter 的出现显得尤为扎眼。

在设计上它们有着许多相似之处，响应式设计/async 支持/setState 更新 等等，同时也有着各种的差异，而大家最为关心的，无非 性能、支持、上手难易、稳定性程度 这四方面：

• 性能上 Flutter 的确实会比 React Native 好 ，如下图所示，这是由框架底层决定的，当然目前 ReactNative 也在进行下一代的优化， 而对此最直观的数据就是：GSY 系列 在 18 年用于闲鱼测试下的对比数据了 。

同时注意不要用模拟器测试性能，特别是 IOS 模拟器做性能测试，因为 Flutter 在 IOS 模拟器中纯 CPU ，而实际设备会是 GPU 硬件加速，同时只在 Release 下对比性能。

• 支持上 Flutter 和 React Native ， 都存在第三方包质量参差不齐的问题，而目前在这一块 Flutter 是弱于 React Native 的 ，毕竟 ReactNative 发展已久，虽然版本号一直不到 1.0，但是在 JS 的加持下生态丰富，同时也是因为平台特性的原因，诸如 WebView 、地图等控件的支持上现在依旧不够好，这个后面也会说道。

• 上手难易度上， Flutter 配置环境和运行的“成功率”比 React Native 高不少 ，这里面有 node_module 黑洞这个坑，也有 ReactNative 本身依赖平台控件导致的，至少我曾经试过接手一个 ReactNative 跑了一天都没跑起来的经历，同时 Flutter 在运行和 SDK 版本升级的阵痛也会少很多。

• 稳定性： Flutter 中大部分异常是不会引起应用崩溃 ，更多会在 Debug 上体现为红色错误堆栈，Release 上 UI 异常等等。

如果你是前端，我会推荐你先学 ReactNative，如果你是原生开发，我推荐你学 Flutter 。

在 React Native 0.59.x 版本开始，React 已经将许多内置控件和库移出主项目，希望模糊 React 和 React Native 的界线，统一开发，这里的理念和 Flutter 很像。

Flutter 暂时不支持热更新！！！！！！！！

二、Flutter 实战

1、Dart 中有意思的一些东西

1.1、var 的语法糖和 dynamic

var 的语法糖是在赋值时才自推导出类型的 ，而 dynamic 是动态声明，在运行时检测，它们的使用有时候容易出现错误。

如下图所以说，

• var 初始化时被指定为 dynamic 类型的。

• 然后赋值的时候初始化为 String 类型，这时候进行 ++ 操作就会出现运行时报错，

• 如下图 2 如果在初始化指定类型的，那么编译时就会告诉你错误了。

1.2、各类操作符

如下图所示， Dart 支持很多有意思的操作符，如下图：

• 执行的时候首先是判断 AA 如果为空，就返回 999 ；

• 之后如果 AA 为空，就为 AA 赋值 999；

• 之后对 AA 进行整除 999 ，输出结果 10 。

1.3、支持操作符重载

如下图所示， Dart 中是支持操作符重载的，这样可以比较直观我们的代码逻辑，并且简化代码时的调用。

1.4、方法当做参数传递

如下图所示，在 Dart 中方法时可以作为参数传递的，这样的形式可以让我们更灵活的组织代码的逻辑。

1.5、async await / async* yield

在 Dart 中 asyncawait/async*yield 等语法糖，代表 Dart 中的 Future 和 Stream 操作，它们对应 Dart 中的异步逻辑支持。

sync* / yield 对应 Stream 的同步操作。