Flutter技术调研及可行性结论

前言：

随着Flutter的快速发展，以及在国内外应用中作为跨平台方案使用的普及，Flutter吸引了无数开发者的眼光。我们也对Flutter从以下方向进行了技术方面的调研，并在项目中进行了接入开发实战，最终给出如下的可行性结论。

调研方向：

• Flutter介绍
• 跨平台UI/API调用
• 项目混编开发实践
• 测试调优
• 打包部署
• 与原生体验的比较
• 热更新
• 第三方库支持
• 学习成本
• 学习资源参考资料等

1、Flutter介绍

• 快速开发：Flutter 的热重载可以快速地进行测试、构建UI、添加功能并更快地修复错误。
• 富有表现力，漂亮的用户界面：自带的 Material Design 和 Cupertino（iOS风格）widget、丰富的 motion API、平滑而自然的滑动效果。
• 响应式框架：使用 Flutter 的现代、响应式框架，和一系列基础 widget，轻松构建您的用户界面。
• 访问本地功能和 SDK：Flutter 可以复用现有的 Java、Swift 或 ObjC代码，访问 iOS 和 Android 上的原生系统功能和系统 SDK。
• 统一的应用开发体验：Flutter 拥有丰富的工具和库，可以帮助开发者从单个代码库为多个平台构建漂亮而快速的应用程序，轻松地同时在 iOS 和 Android 系统中实现想法和创意。
• 原生性能：Flutter 包含了许多核心的 widget，如滚动、导航、图标和字体等，这些都可以在 iOS 和 Android 上达到原生应用一样的性能。

2、跨平台程度，UI/平台对应的API调用

组件UI：

• 布局
• 组件对比（Flutter 与 Android/iOS）
• 新增/移除组件
• 动画
• Draw Canvas
• 自定义Widget
• 点击，手势，触摸
• 主题文字样式
• 表单输入

API调用：

• 页面切换/导航/回退栈
• 线程，异步
• 网络
• 资源依赖，图片，多分辨率等
• 字符串存储，语言本地化
• 生命周期
• 访问GPS 相机等原生功能
• 数据库，本地存储
• 通知

遇到的问题及解决方案：

• 问题：默认是MD风格组件，对于iOS有Cupertino风格的组件，两者不统一。解决方案： 设计统一风格，个别样式需要写if else
• 比如无法addSubView 只能写if else
• 比如没有相对布局等

跨平台相关总结：

Flutter很好的提供了，页面布局导航，动画，手势，交互，网络，线程，数据库，生命周期管理，与原生平台通信等跨平台相关，几乎所有所需要功能的支持和实现。同时官方和社区提供的大量插件，为跨平台的功能开发和实现提供了很大的便捷。

3、与现有项目兼容度，可混合/兼容

主要内容：

• 目前国内/国外 Flutter实践现状
• 安装/开发环境部署
• 简单讲解一个Flutter页面的结构及实现方式
• Flutter独立开发/混编开发流程（平台集成，插件开发）
• 简单的混合开发示例接入Native，能够和Native层有数据交互。
• 混合开发时角色定位

混编开发:

• 集成方式
• 开发模式
• 工程管理
• 原生端与Dart端通信
• 混合栈及路由
• 调试
• 稳定性保证

遇到的问题及解决方案:

• So库兼容性问题
• 包体大小问题
• 资源共享问题
• 混合栈及路由中的问题
• Flutter模块角色定位问题： 比如网络请求,蓝牙请求 该使用Native库/ Flutter库？

项目混合开发相关总结：

Flutter完全支持项目的混合开发，但在涉及到混合栈堆叠的时候，相关便捷性会降低（比如Native页面-->Dart页面-->Native页面-->Dart页面 ）

4、测试调优

• Dart分析器：分析代码并发现潜在错误
• Dart Observatory (语句级的单步调试和分析器) ： 使用语句级单步调试器连接到您的应用程序
• 调试模式断言 ： 使用 Flutter 的 “debug” 模式，Dart assert 语句将被启用。
• 调试应用程序层：Flutter框架的每一层都提供了将其当前状态或事件 dump 到控制台（使用 debugPrint）的功能。
• 可视化调试：设置 [debugPaintSizeEnabled]为 true 来调试布局问题
• 调试动画：减慢动画的速度来调试动画调试
• 调试性能问题
  • 测量 app 启动时间
  • 跟踪 Dart 代码性能
  • PerformanceOverlay

......

• 使用原生调试器调试代码

......

Flutter提供了很多工具和特性，帮助调试Flutter应用程序，保证开发者代码的健壮性和应用程序的性能表现。

5、打包部署

• 配置 flavors 构建双端

• 打包和发布到 Android 平台

• 打包和发布到 iOS 平台

• 持续部署

Flutter提供为Android 和 iOS平台进行多渠道配置，发布，持续构建和部署的方法。

6、与原生体验的比较

• Flutter在进行组件界面的渲染时，不需要经过iOS平台或者Android平台，而是直接通过自己的Skia渲染引擎绘制在画布上，其渲染效率得到大幅提高，在使用体验，性能，流畅度等方面非常接近原生应用。

7、热更新

• iOS不支持热更新（Apple官方审核和限制）
• Android的热更新已列入官方2019的产品规划，未来会支持，但现在还不支持

8、第三方库支持

• 官方插件 https://github.com/flutter/plugins
• Pub https://pub.flutter-io.cn
• Github上列的插件

网络库Http Dio
数据库Sqlite , SharePreference

图片库Cached network image
DeviceInfo
Firebase
WebView通信
Webview Plugin
Image_Picker
Date_Picker
Url_launcher
电池
相机
......

在官方插件库Pub上提供了官方和开发者开发的大量插件，以满足开发者的日常开发需要。目前已有大量开发者在使用这些插件，开发者也可以自己开发相关插件并上传供其他人使用。

9、学习成本，（开发/部署）

• Dart语言
• Flutter相关组件，布局...

Dart的语法个人觉得比较简单，很像是Java+Kotlin的结合体。但是Flutter本着万物皆为Widget的原则，提供了接近30多种不同的布局widget，日常中用的也有如Container、Padding、Center、Align、Row、Column、Stack、ListView等上十种，在布局方面的学习曲线较长，学习成本较高。

10、学习资源，参考资料等

官方文档：https://flutter.cn
Widget目录：https://flutter.cn/docs/reference/widgets
API文档：https://docs.flutter.cn/
插件库Packages：https://pub.flutter-io.cn/flutter
官方维护Plugins : https://github.com/flutter/plugins
Flutter Wiki： https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps
iOS风格组件：https://flutter.cn/docs/development/ui/widgets/cupertino
Samples : https://github.com/flutter/samples/blob/master/INDEX.md
各App Flutter实践总结...

11、Flutter在国内的应用及相关开发实践总结：

闲鱼：https://www.zhihu.com/org/xian-yu-ji-zhu/posts?page=1
今日头条：https://mp.weixin.qq.com/s/-vyU1JQzdGLUmLGHRImIvg
美团：https://tech.meituan.com/2018/08/09/waimai-flutter-practice.html
网易新闻：https://mp.weixin.qq.com/s/a0in4DqB8Bay046knkRr1g
爱奇艺： https://mp.weixin.qq.com/s/f4j3_NGxjAjqNmecc5XrjA
饿了么：https://juejin.im/post/5b8d46c3e51d4538e710bc78
京东，高德，Now直播等...

12、Flutter开发角色定位：

• 适合开发独立项目（纯Flutter项目）
• 适合纯互联网App开发 （不需过多依赖平台/硬件）
• Flutter不适合混合栈堆叠过多的情况（Native-->Dart-->Native-->Dart）
• Flutter不适合平台/硬件强相关的功能开发。在这种情况下，Flutter只适合做页面，使用Native端的数据进行渲染展示。
• 在混合项目开发时，Flutter定位接近H5 , 但是比H5适用范围更广，性能表现和用户体验更好。

13、Flutter槽点（只列举个人觉得最影响的）:

• Flutter提供接近30多种不同的布局widget，日常中用的也有如Container、Padding、Center、Align、Row、Column、Stack、ListView等上十种，在布局方面的学习曲线较长，学习成本较高。
• Flutter使用代码方式写布局。对于Android开发者来说，可能会难以接受和适应，在代码类中多了几百行布局代码的情况
• 目前觉得最困扰的地方在于：使用Flutter进行混合项目开发时，之前原生实现的通用业务基础库（网络库适配，数据库，图片库），通用组件和UI基础库（这个是最耗时的）等，都需要再实现一遍，这和使用Flutter提高开发效率的目标相违背。

14、可行性结论 （得分越高越好，满分为5分）:

	跨平台支持(UI组件/API)	项目兼容度	学习成本	与原生体验的比较	热更新	第三方库支持	市场应用情况
分数	4.5	4	3	5	1	4	4

结合上述的调研和分析，使用Flutter进行项目的开发是完全可行的，而且也是比较有发展前景的。不过如何确定Flutter和Native端开发的边界，会是一个非常重要且需要慎重思考的问题。