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、打包部署

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

6、与原生体验的比较

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

7、热更新

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

8、第三方库支持

网络库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端开发的边界,会是一个非常重要且需要慎重思考的问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容