Flutter 开发体验

去年关注 Flutter 时,处于beta1版本,截至目前已经发布1.2正式版本,社区很活跃,发展很迅速。起初吸引我的有以下几个点:

  • Powered By Google,是谷歌发起的开源跨平台方案,有大公司背书,技术实力有保障,也不会轻易放弃维护。
  • 跨平台解决方案,一套代码完成大部分 Android 和 iOS 的开发工作,包括UI和逻辑代码。
  • 运行效率高(没有量化评估,从体验流畅度主观得到)。
  • Dart 语言上手难度低(也支持高级特性),熟悉 JavaScritp,TypeScript 和 Java 的肯定会有似曾相识的感觉。
  • (安卓开发而言)编写组件不需要 XML 布局文件,纯代码即可完成,方便移植。

学习的第一步是跟着官网搭建环境,把官网的 Demo 运行起来,然后看看官方文档,对照 iOS 写常用到的小组件,一定要非常熟悉系统提供的组件,能够在看到 UI 设计稿的时候能够联想到应该用什么(顺便提一句,我手机上都有官方的 demo 大全,有事儿没事儿就打开看看,加强对各种组件的印象)。同时可以在 YouTube 上找找视频教程,在视频的开头都会展示最终的完成效果,先想一下自己会如何实现。有些教程作的 UI 效果很棒,值得多看并亲自动手实现。慢慢地就会加深了对它的理解,比如以前组件的属性,变成了单独的组件;Widget 并不是真正的视图,类似于 iOS 的 layer对象;没有复杂的生命周期函数。总得来说,学习资料多,学习过程丰富。

后来新项目立项,做技术评估,仔细考量后,决定使用 Flutter 开发,累计2个月时间开发完成,顺利交付。至今,已将 Flutter 应用到实际项目开发中4月有余,可以对大家关心的问题分享下自己的心得体会。

Flutter 能给项目带来哪些好处

1. 降低开发费用

之前需要两人做的工作,现在 1 个经验丰富的开发就可以完成,一套代码能够解决大部分问题,即使小部分问题无法使用 dart 解决,也可通过插件(MethodChannel)方式调用原生代码解决。例如拍照、相册等需要和硬件打交道的功能无法替代,推送、微信分享、微信支付、支付宝支付等三方库目前没有对 dart 做原生支持也无法替代。

2. 开发效率的提升

主要得益于热更新(Hot Reload)技术,可以实现代码实时看到修改效果,无需重新编译打包。使用过 RN 的开发不会陌生,没用过的赶紧体验下,带来的开发体验无与伦比。

3. 降低沟通成本

我尤为重视这点,沟通一直是项目进度的风险点,经历过太多的看似有效实则无效的沟通,当然仅靠新的技术并不能规避和消除这个风险点,需要付出更多的努力才行。这里特指 Flutter 和 Android & iOS 开发模式上的对比。开发功能一般会经过沟通—理解—实施三个阶段和两个过程。单位功能越多人经历这个过程,风险越高,举例来说,同样的功能,和2个人沟通让他们同时实现,相比于和1个人沟通,让他实现出现风险的概率更高。原因在于,2个人对于同样的对话理解程度不同,一旦理解出现偏差,做出来的东西必定会出现隐患;

Flutter 技术相关 Q&A

容易上手吗?

对 Android 开发来说更容易,毕竟是谷歌出品,很多设计元素及设计理念和 Android 相近。对 iOS 开发来说可以对比学习,不理解的概念多看几遍,查查资料,也能很快上手;如果没开发经验,学习 Flutter 应该比 Android 和 iOS 简单,不过建议还是得学习点 Android 和 iOS 基础,至少能够正常使用插件,遇到问题能够知道解决方向。

效率高吗?

我没有做量化测试,印象做有很多人做了相关的测试,可以搜索下。从主观体验上说,效率接近原生,某些场景下会比不上原生,比如 iOS 导航跳转的时候,没有 iOS 丝滑流畅。如果想直观体验可以下载我司正在开发中的App:蒲说,亲自看看有啥区别。之后会开一个专区介绍下我司开发的APP及其功能,敬请期待吧~

有没有遇到什么坑?

这个肯定有,当时做安卓推送的时候就出现能够获取到 DeviceToken ,无法接受到消息的问题,下载官方 Demo 后,再结合文档把他解决了。问题主要是由 Native 的生命周期和 Flutter 生命周期有时差导致的。相信后面还会遇到。

还有,为了保持底部每个 BottomNavigationBar 的状态(滚动位置,数据呈现等),使用了 IndexedStack ,导致需要再界面显示时更新数据功能无法实现,没有机会触发刷新方法(少了 iOS 的 viewWillAppear, viewDidAppear这系列的生命周期方法)。然后使用了 StreamController 来手动触发更新数据。

没有 iOS 的 NotificationCenter,可以广播消息给程序的任意地方。要实现这种功能也依靠了 StreamController

强类型校验,String 转 int 和 double 都得分开写,否则会导致转换异常。目前还没找到很好的解决方法。

全局异常处理,不小心就“全屏乱码”(客户的反馈,很可爱)了。

有没有参考资料可供分享?

当然,下面是我常访问的网站

  • Flutter 官网
  • Material Design 官网,不管是开发还是设计,都可以多访问它,里面定义了 MD 设计规范和建议。访问有点慢或者需要科学上网,可自备工具。
  • YouTube 频道:
  • Medium 关注了几个 Publications ,其他的个人作者就不一一列举,可以通过搜索 Flutter 查看。
    • Flutter
    • Flutter Community,
    • Coding with Flutter

如果还有其他问题,请留言,会上榜哟~~

希望能够对你有所帮助,下篇文章见。