NVIDIA 初创加速计划,免费加速您的创业启动 了解详情
写点什么

Agora Flutter SDK:一套代码,实现双端通话(三)

  • 2019-11-30
  • 本文字数:2468 字

    阅读完需:约 8 分钟

Agora Flutter SDK:一套代码,实现双端通话(三)

2 Flutter 和 Native 的交互

我们这里说的 Native 指的是 Android 平台。


那既然要相互通信,就需要将 Flutter 集成到 Android 工程中来,不清楚的如何集成可以看看这里


这里有一点需要注意,就是我们在 Android 代码中需要初始化 Dart VM,不然我们在使用 getFlutterView() 来获取一个 Flutter View 的时候会抛出如下异常:


Caused by: java.lang.IllegalStateException: ensureInitializationComplete must be called after startInitialization        at io.flutter.view.FlutterMain.ensureInitializationComplete(FlutterMain.java:178)...
复制代码


我们有两种方式来执行初始化操作:一个是直接让我们的 Application 继承 FlutterApplication,另外一个是需要我们在我们自己的 Application 中手动初始化:


方法一:


public class App extends FlutterApplication {    }
复制代码


方法二:


public class App extends Application {    @Override    public void onCreate() {    super.onCreate();    // 初始化 Flutter  Flutter.startInitialization(this);    }  }
复制代码


其实方法一中的 FlutterApplication 中在其 onCreate() 方法中干了同样的事情,部分代码如下:


public class FlutterApplication extends Application {
... @CallSuper public void onCreate() { super.onCreate(); FlutterMain.startInitialization(this); } ...}
复制代码


如果我们的 App 只是需要使用 Flutter 在屏幕上绘制 UI,那么没问题, Flutter 框架能够独立完成这些事情。但是在实际的开发中,难免会需要调用 Native 的功能,如:定位,相机,电池等等。这个时候就需要 Flutter 和 Native 通信了。


官网上有一个案例是使用 MethodChannel 来调用给本地的方法获取手机电量。


其实我们还可以使用另外一个类进行通信,叫做 BasicMessageChannel,先来看看它如果创建:


// javabasicMessageChannel = new BasicMessageChannel<String>(getFlutterView(), "foo", StringCodec.INSTANCE);
复制代码


BasicMessageChannel 需要三个参数,第一个是 BinaryMessenger;第二个是通道名称,第三个是交互数据类型的编解码器,我们接下来的例子中的交互数据类型为 String ,所以这里传递的是 StringCodec.INSTANCE,Flutter 中还有其他类型的编解码器 BinaryCodec,JSONMessageCodec 等,他们都有一个共同的父类 MessageCodec。 所以我们也可以根据规则创建自己编解码器。


接下来创建的例子是:Flutter 给 Android 发送一条消息,Android 收到消息之后给 Flutter 回复一条消息,反之亦然。


先来看看 Android 端的部分代码:


// 接收 Flutter 发送的消息
basicMessageChannel.setMessageHandler(new BasicMessageChannel.MessageHandler<String>() { @Override public void onMessage(final String s, final BasicMessageChannel.Reply<String> reply) { // 接收到的消息 linearMessageContainer.addView(buildMessage(s, true)); scrollToBottom(); // 延迟 500ms 回复 flutterContainer.postDelayed(new Runnable() { @Override public void run() { // 回复 Flutter String replyMsg = "Android : " + new Random().nextInt(100); linearMessageContainer.addView(buildMessage(replyMsg, false)); scrollToBottom(); // 回复 reply.reply(replyMsg); } }, 500);
}}); // ---------------------------------------------- // 向 Flutter 发送消息 basicMessageChannel.send(message, new BasicMessageChannel.Reply<String>() { @Override public void reply(final String s) { linearMessageContainer.postDelayed(new Runnable() { @Override public void run() { // Flutter 的回复 linearMessageContainer.addView(buildMessage(s, true)); scrollToBottom(); } }, 500);
} });
复制代码


类似的,Flutter 这边的部分代码如下:


  // 消息通道  static const BasicMessageChannel<String> channel =      BasicMessageChannel<String>('foo', StringCodec());    // ----------------------------------------------
// 接收 Android 发送过来的消息,并且回复 channel.setMessageHandler((String message) async { String replyMessage = 'Flutter: ${Random().nextInt(100)}'; setState(() { // 收到的android 端的消息 _messageWidgets.add(_buildMessageWidget(message, true)); _scrollToBottom(); });
Future.delayed(const Duration(milliseconds: 500), () { setState(() { // 回复给 android 端的消息 _messageWidgets.add(_buildMessageWidget(replyMessage, false)); _scrollToBottom(); }); }); // 回复 return replyMessage; }); // ---------------------------------------------- // 向 Android 发送消息 void _sendMessageToAndroid(String message) { setState(() { _messageWidgets.add(_buildMessageWidget(message, false)); _scrollToBottom(); }); // 向 Android 端发送发送消息并处理 Android 端给的回复 channel.send(message).then((value) { setState(() { _messageWidgets.add(_buildMessageWidget(value, true)); _scrollToBottom(); }); }); }
复制代码


最后的效果如下:屏幕的上半部分为 Android,下半部分为 Flutter



如有问题,欢迎交流,谢谢!


源码地址:


https://github.com/liusilong/FlutterRendering


https://github.com/liusilong/FlutterAndroidCommunicate


本文转载自公众号声网 Agora(ID:shengwang-agora)。


原文链接:


https://mp.weixin.qq.com/s/hawD7myykCkVJbDbpRZHMw


2019-11-30 15:04653

评论

发布
暂无评论
发现更多内容

百分点感知智能实验室:声纹识别技术发展及未来趋势研究

百分点科技技术团队

DevOps峰会 | 研发效能实践助力互联网行业项目管理“行之有效”

有道技术团队

DevOps

LabVIEW OCR 实现车牌识别(实战篇—3)

不脱发的程序猿

OCR 机器视觉 图像处理 LabVIEW 车牌识别

什么是项目管理

PingCode

【Node Weekly #417】你需要了解的Node.js内存限制

道道里

前端 Node

Amazon Redshift 表设计优化 – 优化已有数据表中的列大小

亚马逊云科技 (Amazon Web Services)

存储

投稿开奖丨“轻量应用服务器”征文活动(9&10月)大奖公布

阿里云弹性计算

阿里云 轻量应用 征文投稿开奖

如何用建木CI导入导出MySQL数据

Jianmu

MySQL 数据库 持续集成 CI/CD

【Frontend Focus #532】前端性能优化

道道里

前端 性能 浏览器

如何构建智能湖仓架构?亚马逊工程师的代码实践来了

亚马逊云科技 (Amazon Web Services)

计算

低代码实现探索(十七)前端种草点

零道云-混合式低代码平台

14 主流的开源监控系统介绍

穿过生命散发芬芳

1月月更 开源监控系统

Java实现创建Zip压缩包并写入文件

CRMEB

LabVIEW色彩定位实现药品包装质量检测(实战篇—4)

不脱发的程序猿

机器视觉 图像处理 LabVIEW 色彩定位 药品包装质量检测

【高并发】要想学好并发编程,关键是要理解这三个核心问题

冰河

并发编程 多线程 高并发 协程 异步编程

什么是云效,云效平台

阿里云云效

阿里云 DevOps 云原生 研发 研发提效

【JavaScript Weekly #399】JavaScript引擎基础(上):形态和内联缓存

道道里

JavaScript 前端

【JavaScript Weekly #399】JavaScript引擎基础(下):优化原型

道道里

JavaScript 前端

启智社区开源项目推荐 | 面向智慧城市的计算机视觉算法基准测试 Benchmark for Smart City上线

OpenI启智社区

计算机视觉 开源项目

呼叫医生云! Amazon HealthLake 正式推出

亚马逊云科技 (Amazon Web Services)

存储

从零实现一个 VuePress 插件

冴羽

Vue 前端 博客 vuepress 博客搭建

Amazon DynamoDB 在智能湖仓架构中的实践

亚马逊云科技 (Amazon Web Services)

存储

云钉一体加速,阿里云计算巢与钉钉深度融合、共建应用新生态

阿里云弹性计算

阿里云 计算巢 云合计划 云钉一体

Back-to-Basics: Two-Way String Matching

袁世超

一个cpp协程库的前世今生(十九)event

SkyFire

c++ cocpp

云效测试篇:测试用例&缺陷管理 | 云效快速入门

阿里云云效

阿里云 DevOps 云原生 云效 测试管理

【网络安全】JAVA代码审计—— XXE外部实体注入

H

网络安全 代码审计

研究完PagerDuty,我发现一款好用的国产告警管理软件

睿象云

DevOps 运维

【JavaScript Weekly #570】 新一代构建工具对比

道道里

前端 vite 打包 webpack babel

云原生下的指标与日志采集

尔达Erda

程序员 容器 云原生 监控 中间件

网络安全kali渗透学习 web渗透入门kali系统的安装和使用。

学神来啦

Agora Flutter SDK:一套代码,实现双端通话(三)_文化 & 方法_声网_InfoQ精选文章