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更多细节：

移动端orm框架性能测评

手把手教你在Flutter项目优雅的使用ORM数据库

手把手教你在Flutter项目优雅的使用ORM数据库--下篇

包地址

flutter-custom-dialog

flutter-custom-dialog 对全局弹窗的功能封装，用语义化的方式对弹窗内部的内容进行填充，目前提供的功能：

1. 支持少数语义化组件的方法，填充弹窗内部的组件内容
2. 支持自定义语义化组件的方法，供开发者自由填充弹窗内部的组件内容
3. 支持设置弹窗背景色、前景色、位置、动画、点击外部消失等功能，具体看下文
4. 支持无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的交错动画。你能够

1. 使用Flutter Animation Set现有的动画组件
2. 使用Flutter Animation Set去建立新的动画组件
3. 贡献你的Flutter Animation Set动画组件
4. 在项目的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中主要有如下三种实现方案：

1. 相似React Native 框架。
2. 替换Flutter编译产物。
3. 页面动态组件框架。

方案名称	性能	成本	动态性	两端是否一致
相似RN的方案	影响较大	很高	较高	一致
动态组件方案	影响较小	通常	有限	一致
编译产品方案	影响较小	较小	很高	不一致

如需了解更多细节，能够查看本帐号以前发过的文章：Flutter 动态化方案探索

探索减小包体体积方案

目前经过深度定制Flutter产物生成流程和engine的加载流程，实现IOS包体积压缩近 1/3 包体积，后续会发布单独推文。

总结

2019年，虽然目前Flutter项目中仍然有多个待解决的问题。但在多个团队共同努力下，克服了主要困难，最终把Flutter落地到生产项目之中。过程有所沉淀，为以后的开发铺平一段道路。

2020年咱们将会继续对Flutter动态化、减小包体积这些痛点问题继续探索，争取落实到业务之中为业务带来更大的人效收益。

即将release的Flutter for Web，Flutter for desktop，还有2020即将发布的Fuchsia系统，将会给Flutter的将来带来更大想象空间。

KM(内部版)了解更多