2019 Joyy Flutter 总结
source link: https://juejin.im/post/5e2557a6e51d4557e41c8036
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
2019 Joyy Flutter 总结
从2017年5月份Flutter发布第一个开发版本,再到2018年12月的第一个稳定版本,Flutter在2019年迎来了各方面爆发式增长。回顾前阵子GitHub刚发布的2019年总结数据:
- GitHub 开源贡献者数量位居第三
- GitHub 开源贡献者增长量位居第二
Joyy从2018年开始关注Flutter技术兴起及Google对其支持的动向,并运用到实际项目之中:
- 为Flutter落地到业务铺路,实现了16个基础中间件,覆盖公司内部大部分基础服务调用。
- 对外开源
Flutter UI
、flutter_orm_plugin
、flutter-custom-dialog
、flutter-animation-set
、SVGAPlayer
- Flutter动态化探索
- IOS包体积压缩探索
- Flutter的跨平台特性与中台理念契合:
直播间中台Flutter解决方案
以及IM中台Flutter解决方案
- 在Joyy内网博客以及Joyy掘金账号发布多篇Flutter相关技术文章。
flutter-ui
开源Flutter UI
组件项目,配套对应文章以及官方翻译。项目自2019年1月28日开始启动,到现在积累了1.1k star。
flutter_orm_plugin
flutter_orm_plugin
是一款高性能ORM操作库,解决了Flutter目前数据持久化存储方案不足的痛点。
- Android orm框架测试对比:
- IOS orm框架测试对比:
了解flutter_orm_plugin
更多细节:
手把手教你在Flutter项目优雅的使用ORM数据库--下篇
flutter-custom-dialog
flutter-custom-dialog
对全局弹窗的功能封装,用语义化的方式对弹窗内部的内容进行填充,目前提供的功能:
- 支持少数语义化组件的方法,填充弹窗内部的组件内容
- 支持自定义语义化组件的方法,供开发者自由填充弹窗内部的组件内容
- 支持设置弹窗背景色、前景色、位置、动画、点击外部消失等功能,具体看下文
- 支持无Context调用弹窗
dialog_demo
divider ✅ |
body ✅ |
head&body ✅ |
listTile ✅ |
ListRadio ✅ |
progress ✅ |
progress&body ✅ |
bottom sheet ✅ |
notice ✅ |
pop menu ✅ Support for custom locations |
dialog_gravity
bottom ✅ |
top ✅ |
left ✅ |
right ✅ |
center ✅ |
left bottom ✅ |
left top ✅ |
right bottom ✅ |
right top ✅ |
dialog_animation
scaleIn ✅ |
fadeIn ✅ |
rotateIn ✅ |
customIn ✅ Support for custom animations |
如需了解flutter-custom-dialog
更多细节,请访问仓库地址
flutter-animation-set
flutter-animation-set
简化Flutter交错动画。用动画配置的形式,通过时间线去驱动Flutter的交错动画。你可以
- 使用
Flutter Animation Set
现有的动画组件 - 使用
Flutter Animation Set
去创建新的动画组件 - 贡献你的
Flutter Animation Set
动画组件 - 在项目的example中观看所有的
Curves
动画效果
transition_animations
YYRotatingPlane ✅ |
YYDoubleBounce ✅ |
YYWave ✅ |
YYWanderingCubes ✅ |
YYFadingFour ✅ |
YYFadingCube ✅ |
YYPulse ✅ |
YYThreeBounce ✅ |
YYThreeLine ✅ |
YYCubeGrid ✅ |
YYRotatingCircle ✅ |
YYPumpingHeart ✅ |
YYRipple ✅ |
YYRotateLine ✅ |
YYCubeFadeIn ✅ |
YYBlinkGrid ✅ |
behavior_animations
YYFadeButton ✅ |
YYSingleLike ✅ |
YYLove ✅ |
YYSpringMenu ✅ |
YYFoldMenu ✅ |
如需了解flutter-animation-set
更多细节,请访问仓库地址
SVGAPlayer-Flutter
SVGAPlayer
是一个轻量的动画渲染库。你可以使用工具从 Adobe Animate CC
或者 Adobe After Effects
中导出动画文件,然后使用 SVGAPlayer
在移动设备上渲染并播放。
SVGAPlayer-Flutter
通过 Flutter CustomPainter 原生渲染动画,为您带来高性能,低成本的动画体验。
如需了解SVGAPlayer
更多细节,请访问官方网站,或开源仓库。
基础中间件
为了让Flutter可以落地到更多应用,中间件团队致力于基础中间件的开发,让Flutter可以无缝对接到公司的基础服务。
在基础中间件完备的前提下,因Flutter跨平台特性,UI和交互只需要一端开发即可,相比起原来需要两端人力,节省大约40%人力成本。
探索动态化方案
作为跨平台解决方案,动态化算是一个比较重要的功能之一,通过查资料&翻文档&技术群交流讨论,发现目前在Flutter中主要有以下三种实现方案:
- 类似React Native 框架。
- 替换Flutter编译产物。
- 页面动态组件框架。
方案名称 | 性能 | 成本 | 动态性 | 两端是否一致 |
---|---|---|---|---|
类似RN的方案 | 影响较大 | 很高 | 较高 | 一致 |
动态组件方案 | 影响较小 | 一般 | 有限 | 一致 |
编译产品方案 | 影响较小 | 较小 | 很高 | 不一致 |
如需了解更多细节,可以查看本账号之前发过的文章:Flutter 动态化方案探索
探索减少包体体积方案
目前通过深度定制Flutter产物生成流程和engine的加载流程,实现IOS包体积压缩近 1/3 包体积,后续会发布单独推文。
2019年,虽然目前Flutter项目中仍然有多个待解决的问题。但在多个团队共同努力下,克服了主要困难,最终把Flutter落地到生产项目之中。过程有所沉淀,为之后的开发铺平一段道路。
2020年我们将会继续对Flutter动态化、减少包体积这些痛点问题继续探索,争取落实到业务之中为业务带来更大的人效收益。
即将release的Flutter for Web,Flutter for desktop,还有2020即将发布的Fuchsia系统,将会给Flutter的未来带来更大想象空间。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK