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(內部版)瞭解更多