最全的Flutter调研报告

Flutter

开篇图

1,什么是Flutter

Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来，目前Flutter已经发布了近60个版本，并且在2018年12月初发布1.0稳定版。
在Flutter诞生之前，已经有许多跨平台UI框架的方案，比如基于WebView的Cordova、AppCan等，还有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。
Flutter与用于构建移动应用程序的其它大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。Flutter使用Skia作为其2D渲染引擎。

注意：Android系统内置Skia,iOS系统未内置Skia，所以ios的包会比Android更大。

Flutter优势
1. 跨平台，同一套代码适用于Android和ios两个平台，可以节省开发资源、测试资源
2. 原生性能，使用Skia作为其2D渲染引擎，既不使用WebView，也不使用操作系统的原生控件，这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本
3. 开发效率高，Flutter的热重载可以快速地进行测试、构建UI、添加功能并更快地修复错误
4. 从底层C++到高层Dart，可扩展性高
5. 整体开发环境要求不高，轻量编辑器+模拟器即可完成开发，已支持IDE:Android Studio和VSCode

2,跨平台方案比较

3,Flutter架构图

1. Flutter Framework：纯 Dart实现的 SDK

   • 底下两层：底层UI库，提供动画、手势及绘制能力
   • Rendering层：构建UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上
   • Widgets层：基础组件库，提供了 Material 和Cupertino两种视觉风格的组件库

2. Flutter Engine：纯 C++实现的 SDK

   • Skia:渲染引擎
     

   • Dart:Dart运行时
     

   • Text:文字排版引擎
     

4,混合开发支持

目前主流的混合开发方案有两种集成方式：

1. 源码集成： 也就是谷歌官方提供的方案[https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps]
2. 产物集成： Flutter项目单独开发，开发完成后发布成aar包或者iOS的framework形式，原生项目依赖flutter输出的制品即可。具体可以参考闲鱼的文章
   

当使用源码集成方案之后开发模式会如下图所示

android原生和Flutter数据通信

1. Android---> Flutter    支持
2. Flutter--->Android     支持

参考: https://www.jianshu.com/p/c5263a3d7aac

IOS原生和Flutter数据通信

1. IOS---> Flutter  支持
2. Flutter--->IOS   支持

参考:https://www.jianshu.com/p/5e5d54db8c7e

5,网络请求框架

1. httpClient(Flutter)   Flutter原生提供 
2. dio :支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等...
https://github.com/flutterchina/dio
3. http : 该软件包包含一组高级函数和类，可以轻松使用HTTP资源。它与平台无关，可以在命令行和浏览器上使用。
https://pub.dartlang.org/packages/http
4. http_multi_server : dart:io HttpServer包装器，用于处理来自多个服务器的请求 
https://pub.dartlang.org/packages/http_multi_server

参考:
https://www.jianshu.com/p/bd4c2dc5e97f
https://www.imooc.com/article/39353

6,WebSockets使用

1,Flutter原生支持webSockets 连接方式参考官方文档

https://flutter.dev/docs/cookbook/networking/web-sockets

2,三方封装的一个Socket连接  flutter_socket_io

https://github.com/infitio/flutter_socket_io

7,本地存储

Flutter 本身不提供本地存储的 三方提供的文件存储的组件
1. Preferences    // shared_preferences: “^0.4.1”
2. 文件存储         // path_provider: ^0.4.0
3. Sqlite        //sqflite: >=0.8.5

具体使用方式参考:http://flutter.link/2018/04/13/Flutter中的本地存储/

8,开发模式(是否支持mvp mvvm)

1,支持MVP模式 

参考:
https://medium.com/flutterpub/the-mvp-architecture-pattern-in-flutter-with-simple-demo-65ab3282c54b
https://github.com/liemvo/Flutter_bmi

2,支持MVVM模式

参考:
Flutter使用MVVM设计模式的示例
https://www.jianshu.com/p/384919408dda
https://github.com/ikakaxi/flutter_mvvm

9,是否支持自定义控件

支持自定义控件

参考:https://juejin.im/post/5cb872075188253247129b87

10,推送服务

1, 目前市面上只有极光支持Flutter SDK (推送的SDK)
2, Flutter 集成推送两种方式 
    a: 使用极光的SDK
    b: 使用原生(Andorid ,IOS)集成推送,然后把推送的数据传递到Flutter 

11,线程切换

结论: Flutter 支持线程切换  
原因: Dart语言提供的异步工具（例如async/await）,来执行异步工作

参考: https://www.jianshu.com/p/aa7a8d136078

12,三方库的使用

图像加载

1,cached_network_image"^0.4.1"

---

https://pub.dartlang.org/packages/cached_network_image
Flutter库来加载和缓存网络图像。也可以与占位符和错误小部件一起使用。

2,flutter_advanced_networkimage0.2.8

---

https://pub.dartlang.org/packages/flutter_advanced_networkimage
高级图像缓存加载和缩放控制。

3,transparent_image^0.1.0

---

https://pub.dartlang.org/packages/transparent_image
简单的透明图像，表示为Uint8List。在加载图片时可以用来做为占位符。

13,参考

https://juejin.im/post/5c4e6dc66fb9a049eb3c516a
https://flutter.dev/

混合开发参考
https://juejin.im/post/5c6eba82518825626b76f0eb
https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps
闲鱼基于 Flutter 的移动端跨平台应用实践
https://www.infoq.cn/article/xianyu-cross-platform-based-on-flutter