大数跨境
0
0

【融云分析】基于原生代码开发 Flutter 插件

【融云分析】基于原生代码开发 Flutter 插件 融云全球互联网通信云
2019-08-15
2
导读:融云 IM Flutter 已开源,欢迎体验


Flutter 是谷歌推出的移动 UI 框架,所使用的开发语言是 Dart,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。Flutter 可以与现有的代码一起工作。在全世界,Flutter 正在被越来越多的开发者和组织使用,并且它是完全免费、开源的。


Flutter 的特点


1. 快速开发

毫秒级的热重载,修改后,应用界面会立即更新。使用丰富的、完全可定制的 Widget 在几分钟内构建原生界面。


2. 富有表现力和灵活的 UI

快速发布聚焦于原生体验的功能。分层的架构允许完全自定义,从而实现难以置信的快速渲染和富有表现力、灵活的设计。


3. 原生的性能

Flutter 包含了许多核心的 Widget,如滚动、导航、图标和字体等,这些都可以在 iOS 和 Android 上达到原生应用一样的性能。

 

但还有一个现实的问题:假如我们有了 iOS 和 Android 的原生 SDK,如果需要 Flutter 版本的,需要我们从头开始再构建一遍吗?

 

答案是不需要,Flutter 可以和原生代码交互,支持基于原生代码开发插件,这样就可以通过 Flutter 调用原有 SDK 的接口。


| 基于原生代码开发 Flutter 插件


一、Flutter 跨平台原理介绍


下图是 Flutter 官网对于跨平台原理的描述,详情点击了解



通过该图我们可以看到,Flutter 会通过 MethodChannel 将数据传递给 iOS/ Android ,反之 iOS/ Android 也可以通过 MethodChannel 将数据传回给 Flutter 。

 

还有一个问题:Flutter 使用的是和 iOS、Android 不同的开发语言,相互能传递什么类型的数据呢? 



上面这张表罗列了 Flutter 使用的 Dart 语言与 iOS/Android 可以传递的数据类型,从表中我们可以看到,它只能传递一些基本的数据类型,比如 bool,int,double,高级的就是 String,List,Map,而且表中指明了在各平台对应的数据类型转换:如 Dart 的 Map 对应 Android 的 HashMap,对应 iOS 的 NSDictionary 。

 

二、插件的基本结构介绍


在终端输入下面的命令,等待一分钟左右,Flutter 就会把整个项目框架搭建好。


Flutter Plugin 可简单理解为上图中的 Flutter wrapper , iOS wrapper , Android wrapper 三个绿色部分,图中的双向箭头表明了代码的调用逻辑,这就是为什么说 Flutter 的插件可以跨平台使用。

 

如何确定 Flutter wrapper 调用的是 iOS 的接口还是 Android 的接口?答案是由运行的设备决定,即运行 iOS 设备,Flutter wrapper 自动调用 iOS wrapper 的接口,Android 也是这样。

 

当执行完创建 Plugin 的命令之后,Flutter 会负责在当前目录创建一个 Plugin 项目,具体的目录含义如下:

android/ : Android wrapper

ios/ :iOS wrapper

lib/ :Flutter wrapper

example/ :demo 根目录

example/android/ :Android project

example/ios/ :iOS project

example/lib/ :Flutter app


第一次运行需要使用终端进入 Plugin 项目路径下执行下面命令获取 Flutter 的依赖。



三、代码层面的交互演示


MethodChannel 的创建

 

Flutter 通过 MethodChannel 与 iOS/Android 进行交互,下面的代码展示了三个平台如何创建 MethodChannel 对象。



通过相同字符串创建的 MethodChannel 就可以进行跨平台的数据交互。

 

当 Flutter 调用接口触发原生代码的时候:

iOS 会触发的方法



Android 会触发的方法



两个平台一样,都会获取 MethodCall 对象 和 FlutterResult 对象。


MethodCall 对象保存了方法名和参数,通过方法名确定调用具体的方法,通过参数获取具体的数据。

 

FlutterResult 对象可以将数据返回给 Flutter,下面会讲解该对象的使用。

 

Flutter 与 iOS/Android 数据交互总共三种方式:


1. iOS/Android 不给 Flutter 返回数据



2. iOS/Android 通过 FlutterResult 给 Flutter 返回数据



3.  iOS/Android 通过 MethodChannel 给 Flutter 返回数据



通过 FlutterResult 和 MethodChannel 都可以给 Flutter 返回数据,但是两者有所区别:


  • FlutterResult 适用于能够快速返回数据的接口,比如说 IM 连接的回调或者连接服务器的回调。

  • MethodChannel 适用于不确定什么时间响应数据的接口,比如说收到消息的回调。

  • MethodChannel 可以替代 FlutterResult 返回数据,但是 FlutterResult 无法替代 MethodChannel。

 

为了让开发者和更多平台便捷的使用融云 IM 功能,融云 IM Flutter 已经开源,欢迎大家体验使用。


GitHub 地址:点击文字


Flutter 仓库地址:点击文字


    广告时间   


年中大促火热进行中!


7- 8 月,融云 IM 商用版最低可享 7 折优惠,余量有限,抢到就是赚到!欢迎大家火速预约和购买,畅享全年冰点价!咨询电话:13161856839


最新活动详情请点击阅读原文



【声明】内容源于网络
0
0
融云全球互联网通信云
领先的全球智能通信云服务商,以通信云 PaaS 和 SaaS 产品,赋能开发者和企业创新。艾瑞权威数据显示,融云 IM 市场份额连续多年稳居第一。
内容 747
粉丝 0
融云全球互联网通信云 领先的全球智能通信云服务商,以通信云 PaaS 和 SaaS 产品,赋能开发者和企业创新。艾瑞权威数据显示,融云 IM 市场份额连续多年稳居第一。
总阅读951
粉丝0
内容747