Flutter技术调研报告

Flutter技术调研报告
目 录

一、Flutter是什么 1

1. 官方介绍 2
2. Flutter 与原生的性能对比 3
   二、目前状况 4
   1.大厂使用情况 4
   2.举例说明 4
   三、自身分析 5
   1.公司目前项目 5
   2.维护方案 6
   四、优势 7
   1.开发成本比较 7
   2.跨平台方案比较 7
   五、坑 8
   六、三方支持的Flutter Sdk 9
   1.权限 10
   2.二维码 11
   3.图表 12
   4.分享和登录 13
   5.推送 14
   6.统计 15
   7.支付 15
   8.sms(短信验证码) 16
   9.音视频播放 16
   10.IM(即时通讯) 17
   11.webRtc 17
   12.直播 18
   七、接入流程 19
   八、结论 20

一、 Flutter是什么?

1. 官方的解释：https://flutterchina.club/technical-overview/
   视频介绍地址：https://www.bilibili.com/video/av20104370?from=search&seid=8871881443096034353

Flutter是一款移动应用程序SDK，一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。
Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。

Flutter 系统架构：每层都依赖其下面的一层结构

2．Flutter 与原生的性能对比
android studio 开发工具自带 Monitor进行性能检测结果如下：
从两张图来看，Flutter的内存占用略高于原生，总体来说接近原生的性能
Flutter 页面：

Native 页面：

2.0 Flutter webview plugin 和原生 webview 对比：结论是原生WebView 占用内存更小，网页加载速度和 html5 的兼容性无明显差异。这些通知交互 widget。但是 flutter_webview_plugin 具有跨平台的优势，如果需要同时 flutter 项目中同时在 Android 和 iOS 端使用 WebView，建议使用 flutter_webview_plugin，否则，建议使用 native WebView。
详情参见：
https://www.jianshu.com/p/b2918d939995
二、 目前有哪些大厂在用 ?

举个栗子：
1.0 闲鱼app的详情页是 flutter 开发的
2.0 京东的无人机团队，京东飞服 App 完全使用的 Flutter 开发的
3.0 马蜂窝电商研发客户端团队 关于我们页面 和通知页面
三、 自身状况
狸米进校产品线大前端产品族

原生开发团队，主要针对以下两款产品开发。

Android 和 IOS 团队各自维护多个仓库，维护方式，基本维持原有方式。android 和 ios 开发 同时维护一套代码，两套环境，三套仓库。
很多情况下，Flutter的接入都是在原有的移动端项目的基础上接入，这样相对于侵入原有项目弱，并且接入的成本低，风险也低。在接入时，目前大部分公司开发人员将Flutter 以lirbary 形式引入项目对享有native 项目不产生任何影响，拥有自己的独立的git 仓库，共同维护,便于版本管理。

1.0 现有方式：

2.0 Flutter 加入后，原生端可通过远程依赖产物或者 liarary 的方式集成

1.配合第三方闲鱼flutter解决方案

2．依赖flutter 工程产物aar 的形式，push 到maven ,本地实现maven地址依赖，便于android 和 ios 团队合作

3. 纯Flutter 工程开发

四、相比原生的优势：
Flutter 具有的跨平台开发和热重载等特点极大地节省了开发效率
为什么要使用Flutter?
官方给出的解释：https://flutterchina.club/technical-overview/

1. 节约开发成本
   由于其跨平台特性和响应式的编程方式，使开发更加便捷，节约开发周期，把四个人维护两套代码的任务变成现在四个人维护一套代码。解决80% 的android 和 ios 相同的业务逻辑，20% 用于写 native 插件,使用熟练，可节约 30%-50% 的开发成本；
2. Flutter 是一款性能优良的适合移动端app跨平台开发框架 ,一套代码,两端运行
   对比图：

类型 ReactNative Weex Flutter
平台实现 JavaScript JavaScript 无桥接原生编码
引擎 JS V8 JSCore Flutter Engine
核心语言 React Vue Dart
Apk 大小 7.6M 10.6M 8.1M
Bundle 大小 默认单一，较大 较小 不需要
上手难度 稍高 容易 一般
框架难度 较重 较轻 重
特点 适合整体开发app 适合单页面 适合整体开发app
社区生态 丰富，FaceBook 维护 目前托关于apache 出来一年多，Google维护，大厂跟随者众多
支持 android、ios android 、ios web android 、ios 、Fuchsia OS…

为了解决WebView性能差的问题，以React Native为代表的一类框架将最终渲染工作交还给了系统，虽然同样使用类HTML+JS的UI构建逻辑，但是最终会生成对应的自定义原生控件，以充分利用原生控件相对于WebView的较高的绘制效率。与此同时这种策略也将框架本身和App开发者绑在了系统的控件系统上，不仅框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API的变化，开发者可能也需要处理不同平台的差异，甚至有些特性只能在部分平台上实现，这样框架的跨平台特性就会大打折扣。
Flutter则开辟了一种全新的思路，从头到尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。
由此可知，flutter的性能 高于其他第三方跨平台框架.

五、坑：
1．集成 闲鱼技术方案 flutter_boost 的坑,对于低端机(android 4.4一下机器的
兼容性)黑屏现象和偶发的闪屏现象
2．抓包的坑，需要代码层做代理设置；测试人员抓包麻烦。详情参阅：https://www.jianshu.com/p/7bf51fddbb29
因为Flutter的网络请求框架dio，不向okHttp 一样支持 代理，所以抓包是个麻烦事，需要每次打包给测试时在代码层面动态配置代理。详情请点击查看配置方法：
https://blog.csdn.net/weixin_34409741/article/details/91454162
3．Flutter的so包是armabi-v7a(仅支持)，对于安卓有些机型的不兼容
4．包体积增大，android 包增大6-8M ; ios 包提交增加8-10M
5．目前对第三方sdk 支持较少 ，生态尚不完善。如:友盟推送, 由于友盟厂商暂时不支持flutter版本的sdk,如果使用则需要开发者自己开发Flutter插件,解决方案：以flutter集成友盟统计插件为例：https://github.com/pedia/flutter_umeng_analytics
Flutter Plugin开发流程：https://www.jianshu.com/p/46957915a909
因此，由于没有太多成熟的三方框架，开发复杂需求时会相对更麻烦。具体三方sdk见第六节部分
6. Flutter目前不支持热更新，RN支持热更新。个人认为热更新在跨平台中占重要地位，这里是Flutter的一块明显的缺陷
7. 各种插件都有可能导致构建问题，导致编译不通过，需要大量时间去调试，且是个需要长期处理的工作任务
8. 仅仅是跨平台UI。本身还是还是需要android/iOS原生编译器来打包。甚至有些模块需要android/iOS原生实现，Flutter来调用。一个工程师同时熟悉三端（android、iOS、Flutter）难度很大。再加上Flutter与android/iOS原生端交互的复杂性，在开发期间Flutter在开发速度上并不会占优势，还很可能慢于android/iOS原生开发
9. 新语言Dart ，虽然语言比较简单，但是对于初学者开发。会遇到很多在学习中没办法接触到的问题、需要画大时间去解决和总结。对新语言中的widget、setState等新的代码规范。从熟悉到熟练，需要时间的积累
六、三方支持的Flutter版本sdk
在Flutter官方的Pub平台上，纯Flutter Package大概有两千多个。详见：https://pub.dev/，基本上常见的库还是都有的，例如网络、图片、音视频播放等等。但是对于目前Android以及iOS的生态，还是远远的不足的，对于一些复杂的UI或者一些不是特别通用的功能，就得自己去实现，解决方案见第五节第六条。
目前第三方支持的flutter的sdk 如下，暂不支持的已标黄
1.权限库
simple_permissions 0.1.5 https://pub.dartlang.org/packages/simple_permissions
用于android和ios的请求权限的库
flutter_simple_permissions 0.0.1 https://pub.dartlang.org/packages/flutter_simple_permissions
权限申请的库
2．二维码
库名 版本号 链接 描述
qr_flutter 1.1.5 https://pub.dartlang.org/packages/qr_flutter
QR.Flutter是一个Flutter库，基于QR-Dart,可通过Widget或自定义Paint进行简单快速的QR码渲染。可配置的输出大小、填充、背景和前景颜色。可以导出图像数据。不需要Internet连接。
barcode_scan 0.0.8 https://pub.dartlang.org/packages/barcode_scan
用于扫描2D条形码和QRCodes的Flutter插件。
qrcode_reader 0.4.4 https://pub.dartlang.org/packages/qrcode_reader
使用相机读取二维码的Flutter插件。
3.图表库
charts-common 0.3.0 https://pub.dartlang.org/packages/charts_flutter
Material Design风格的图表库
charts-flutter 0.3.0 https://pub.dartlang.org/packages/charts_common
通用的图表库组件
flutter_circular_chart 0.0.3 https://pub.dartlang.org/packages/flutter_circular_chart
一个让你使用flutter轻松创建的动画圆形图控件的库。

4.分享和登陆
库名 版本号 链接 描述
flutter_webview_plugin 0.1.6 https://pub.dartlang.org/packages/flutter_webview_plugin
允许Flutter与原生Webview进行通信的插件
sharesdk 1.0.9 https://pub.dartlang.org/packages/sharesdk
ShareSDK官方推出的功能的Flutter插件，用于分享、登陆等社交功能。
share 0.5.1 https://pub.dartlang.org/packages/share
支持分享的flutter插件
flutter_qq 0.0.1 https://pub.dartlang.org/packages/flutter_qq
这个库集成了QQ登录、QQ分享、QQ空间分享。
lutter_wechat 0.1.2 https://pub.dartlang.org/packages/flutter_wechat
这个库集成了微信，支持微信登录、分享、支付。
-暂无 -暂无 -暂无 极光针对Android和iOS各自都有SDK，只是目前极光还没有把分享和登陆集成到Flutter里。
-暂无 -暂无 -暂无 友盟的U-Share社会化分享还没有推出Flutter版本的插件库
5.推送
jpush-flutter-plugin 0.0.11 https://github.com/jpush/jpush-flutter-plugin
极光推送官方的插件库
-暂无 -暂无 -暂无 目前Mob的推送还没有推出Flutter版本的插件库。（Mob针对Android和iOS各自都有推送的SDK，只是目前Mob还没有把推送集成到Flutter里面）。
-暂无 -暂无 -暂无 目前友盟的U-push推送还没有推出Flutter版本的插件库。
6.统计
flutter_umeng_analytics 0.0.1 https://pub.dartlang.org/packages/flutter_umeng_analytics
这个库集成了友盟统计sdk(网友写的，并非官方的)
-暂无 -暂无 -暂无 极光和友盟官方均针对Android和iOS各自都有SDK，只是目前还没有把统计功能集成到Flutter里。
7.支付
flutter_alipay 0.1.0 https://pub.dartlang.org/packages/flutter_alipay
这个库继承了支付宝，兼容android和ios
–暂无 --暂无 --暂无 微信支付
8.SMS（短信验证码）
mobsms 1.0.0 https://pub.dartlang.org/packages/mobsms
Mobsms，由Mob官方提供
–暂无 --暂无 --暂无 极光针对Android和iOS各自都有SDK，只是目前极光还没有把短信验证码集成到Flutter里。
9音视频播放
flutter_ijkplayer
0.3.3 https://pub.dev/packages/flutter_ijkplayer
Flutter 版本基于bilibili 的ijkPlayer 音视频播放器
10.IM(即时通讯)
jmessage-flutter-plugin 0.0.15 https://github.com/jpush/jmessage-flutter-plugin
极光官方推出的IM聊天、社交功能的插件。
11.WebRTC多人视频会议，视频一对一聊天等场景
flutter-webrtc
0.1.7.
https://github.com/jpush/jmessage-flutter-plugin
声网络公司提供，不是纯flutter SDK ，是款flutter 插件
12.直播
–暂无 --暂无 --暂无 腾讯云、 网易云 、环信 融云、 七牛云等主流直播sdk厂商均不支持flutter 版sdk
商业收费 大牛直播sdk 支持flutter版本
https://gitee.com/jadennn/flutter_ijkplayer_source.git
封装ijkplayer使其支持rtsp播放

七、接入流程

1. Flutter 混合开发FlutterBoost iOS 接入流程

2. Flutter 混合开发FlutterBoost android 接入流程
   参见wiki文档:
   http://wiki.limikeji.com/plugins/viewsource/viewpagesrc.action?pageId=25931575
   https://github.com/awesomeyin/flutterInNative
   八、结论

3. 针对Flutter 官方本身
   Flutter目前最新版本sdk为稳定版 v1.7.8.据官方介绍，预计今年1月份推出realease 版本，跨平台和热重载，亚秒级编译运行，所见即所得。未来也将具有热修复的功能。由于是谷歌亲儿子，被重视程度高，发展速度较快，未来可期；具体参阅：
   https://flutter.dev/docs/development/tools/sdk/releases

4. Flutter api的问题：Flutter 中目前拿来就用的能力只有 UI 控件和 Dart 本身提供能力，但是好多依赖原生api 的功能性开发需要通过包裹平台通道进行和宿主 app 进行交互，工作量上：原生端增加了编写插件的任务，如调用原生qq/微信分享sdk ，详见：https://blog.csdn.net/S43565442/article/detssails/86016442
   Flutter SDK目前提供了一下插件：
   https://flutter.dev/docs/development/packages-and-plugins/using-packages
   https://github.com/flutter/plugins/tree/master/packages

5. 针对Dart 语言特性，原生端学习成本较高，上手之前需要自学一段时间；
   Dart学习参阅：https://flutterchina.club/bootstrap-into-dart/
   Web 开发人员学习成本较低，语言风格类似JS ，学习成本相对较低，参见官方解释《Flutter for Web开发者》：https://flutterchina.club/web-analogs/

6. 由于Flutter 已有工程迁移比较复杂，以前沉淀的 UI 控件，需要重新再实现一套.所以对公司来说比较适合开展新项目和新业务，或者在旧项目上进行一些诸如个人中心等静态的，简单的页面的开发，不适合在原有项目上大动干戈；

7. 项目周期
   1.0 熟悉Flutter 开发后，项目周期可以缩短到30%-50% ,依赖项目中使用flutter 页面的多少而定；但在熟练使用后，做不复杂页面和功能有提效的效果，可降低维护成本。
   2.0 前期在不熟悉情况下冒然开发，则需要面对
   <1>需要团队成员进行自学Dart语言；
   <2>需要开发过程自定义一些平台插件和原生交互；
   <3>需要解决flutter 机型适配等潜在的一些坑
   <4>需要解决android和ios 团队的配合问题
   原生交互如果考虑到目前坑比较多的状况，加上踩坑的时间，可能就无法去评估了；

8. 社区生态良好，国内大厂已在实践，是未来的趋势，对于个人开发者而言学习是必要的。在开发时，可以选择跟着大厂走，复用他们开源的解决方案；
   闲鱼团队：https://github.com/alibaba/flutter_boost
   7．狸米学习和狸米老师作为目前公司已经较为成熟的商业项目,整体使用flutter学习成本大，混合开发是首选方案。一些静态页面的编写还是比较快的，页面的UI 还原度较高