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

Flutter 是谷歌推出的移动 UI 框架,所使用的开发语言是 Dart,能够快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 能够与现有的代码一块儿工做。在全世界,Flutter 正在被愈来愈多的开发者和组织使用,而且它是彻底免费、开源的。android

Flutter 的特色ios

1.快速开发git

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

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

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

3.原生的性能app

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

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

答案是不须要,Flutter 能够和原生代码交互,支持基于原生代码开发插件,这样就能够经过 Flutter 调用原有 SDK 的接口。字体

基于原生代码开发 Flutter 插件

1、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 。

2、插件的基本结构介绍

在终端输入下面的命令,等待一分钟左右,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 的依赖。
图片描述

3、代码层面的交互演示

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 地址:https://github.com/rongcloud/...

Flutter 仓库地址:https://pub.dev/packages/rong...

融云IM商用版年中大促火爆进行中

从 7 月 1 日——8 月 31 日,融云年中大促正在火热进行中,IM 商用版预存最低享 7 折,更多详情能够点击登陆融云官网活动页面查看。

相关文章
相关标签/搜索