作为当前最火热的跨端技术之一, Flutter频频登上各大科技版面头条。
阿里，腾讯和美团等大厂也发布了众多Flutter相关技术实践文章。
不少个人公众号也纷纷发布相关技术专栏。
但是真正用于生产系统的除了大厂外，并不多见。那么小团队怎么办？能不能用呢
我司经过半年的开发，用Flutter完成了C端产品的App初版， 我就在这里从前端架构的角度，聊一聊我们团队在Flutter上的一些实践经验。
本文不谈具体的技术细节，也不展示代码样例，只聊我们团队到目前为止的的实践感想和经验总结。读者对象为有一定前端开发经验，用过并且想深入使用Flutter作为生产级别框架的开发者。
1.先说说团队成员构成。
本项目负责Flutter开发的前端团队总共3人，iOS工程师，Android工程师，Web前端工程师各一人，此前并无Flutter经验。 其中Android工程师有React Native经验， Web前端工程师有React经验。 项目初期只有iOS工程师和Web前端工程师。 大约一个月后Android工程师加入。
2. 学习Dart、布局和基本组件
如果有OC，Java 和Es6的经验，Dart很好学，大约经过一、两周的学习就已经可以开始上手写代码了。
大家都是从最基本的Material组件开始使用，先搭建基本的App框架，并在这过程中学习布局。Flutter的布局很好上手， 学习了Row，Column，Flex和Stack，Positioned,常见的布局就差不多搞定了。当然，Flutter的布局也有种种怪癖和坑。不过比起拥有float， margin collapse等反人类怪癖的css来说，学习曲线很低。而大部分布局问题都有不少中英文资料解答了。
https://flutter.dev/docs/development/ui/layoutflutter.dev https://flutter.dev/docs/development/ui/widgetsflutter.dev组件方面，有经验的客户端工程师也可以很容易的在各种可滚动组件中找到如ListView等老熟人。
https://flutter.dev/docs/development/ui/advanced/sliversflutter.devFlutter标配的GestureDetector也提供了丰富的手势识别支持，识别点击，滑动，长按，短按和缩放等手势轻而易举。
https://flutter.dev/docs/development/ui/advanced/gesturesflutter.dev路由：路由功能也由Flutter原生框架支持。辅以配套的Material和Cupution组件，大约一个月，我们就已经快速实现了主页，中间页和我的三个基本模块的主要内容。这期间我们也对路由功能做了一些自己的封装，减少了一些调用代码量。
https://flutter.dev/docs/development/ui/navigationflutter.dev状态管理，Flutter的状态管理借鉴了React，Web前端同学可以在这里看到熟悉的setState函数，有经验的同学可以很快上手。而常见的Eventbus、Redux、MobX和Rx等状态管理组件也有了Flutter的实现。闲鱼还有自研的Fish-Redux
https://flutter.dev/docs/development/data-and-backend/state-mgmt/optionsflutter.dev动画：flutter提供了Animation和Tween支持
https://flutter.dev/docs/development/ui/animations/tutorialflutter.dev当然，团队里的三位的同学也在各种领域都有丰富的经验，并有极强的学习能力和学习热情。才能在短时间内达成这样的成果，所以团队里有优秀的人才还是很重要。
3. 丰富的第三方组件和代码示例
一个完整的App，少不了推送，错误监控等辅助功能，下面是一些常用的功能组件
上下拉刷新：
https://pub.dev/packages/flutter_easyrefreshpub.dev推送：极光
极光推送 - 客户端集成插件 - 极光文档docs.jiguang.cn埋点：极光统计
极光统计 - 客户端集成插件 - 极光文档docs.jiguang.cn网络请求库：Dio，相当于Web前端的Axios
https://github.com/flutterchina/diogithub.com序列化：因为Dart在Flutter中不支持反射，序列化稍显繁琐，官方也有不错的示例
https://flutter.dev/docs/development/data-and-backend/jsonflutter.dev错误监控：FlutterError可以捕捉错误信息并上报，官网给出了示例：
https://flutter.dev/docs/cookbook/maintenance/error-reportingflutter.dev示例资源：官网和Flutter中文网提供了很多的示例
https://flutter.dev/docs/cookbookflutter.dev国际化：intl提供了支持
https://flutter.dev/docs/development/accessibility-and-localization/internationalizationflutter.dev4. 测试、调试和工具
开发工具：vscode和android studio提供了和其他语言一样完美的开发体验
https://flutter.dev/docs/development/tools/android-studioflutter.dev调试：提供了布局查看器，内存查看器、时间线查看器和性能查看器等工具
https://flutter.dev/docs/testing/debuggingflutter.dev测试：从单元测试到集成测试都有支持
https://flutter.dev/docs/testingflutter.dev5. 原生交互
原生插件开发：Platform Channel提供了和Native系统通信的能力，目前我们用的非常少，只自己编写了读取计步器，调用openCV和调用第三方SDK等几个插件。大部分代码都还是Flutter编写，复用率非常高。
https://flutter.dev/docs/development/platform-integration/platform-channelsflutter.dev6. 自研：
对我们的第一版App来说，自研的组件并不多。主要有：
一个尺子状的滑动选择器
图表库。这个有团队提供了一个flutter charts，但是远远没有Echarts好用
使用Flutter Canvas 我们自己开发了折线图，柱状图和散点图等图表并支持滑动。
标签云：我们自己开发了3D旋转标签云组件。下面是一个示例，当然，我们的比这个好看的多：）
Android的3D标签云：TagCloudView - Android开发 - 开发语言与工具 - 深度开源www.open-open.com
关系图谱：我们自己还开发了一个类似于neo4j中的知识图谱节点关系图组件
7. 坑：
- 报错信息有时候晦涩难懂，习惯了就好
- WebView的支持坑不少，有时候需要原生层面修改代码
- 各种奇怪的bug，比如两个Container之间一道奇怪的细线，官方给出了不太通用的workaround
- 图片控件加载图片缓慢等等
因为中文资料较少，有些问题的解决需要有一定的英文搜索和阅读能力
8.总结
经过半年的学习，团队三人组已经很好的掌握了Flutter，开发速度明显提升。
半年时间里不仅完成了App的业务功能，还完成了路由组件自定义封装，图表库，标签云和关系图谱等自定义组件开发。代码达到很高的复用率（估计有95%），只有几个需要和原生通信的插件在iOS和安卓上分别进行了开发，原本计划需要2个Android和2个iOS加1个Web前端的开发，3个人就完成了。而且3位开发还可以互相修改和维护大部分代码。
不过Flutter也还有很多不完美的， 对于实时性和性能要求比较高的如视频播放、图像处理和对战游戏等或许还不一定能满足要求。有些Bug还需要等待Flutter团队处理。但是对于常见的App功能来说，Flutter在动画和流畅性方面已经达到令我们满意的要求了。
现在Flutter社区很活跃，几个大厂和个人团队也在Engine层面给Flutter团队和社区贡献了不少优化代码，我们相信Flutter会是以后以后跨端开发的重要力量。
供参考。
扫一扫
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
