2025上半年,最新 AI实践都在这!20+ 应用案例,任听一场议题就值回票价 了解详情
写点什么

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:04846

评论

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

Java7提供的Fork/Join框架实现高并发程序,你会使用吗

华为云开发者联盟

高并发 开发 华为云 12 月 PK 榜

一文梳理HTTP、TCP、Socket和WebSocket的区别和联系

No Silver Bullet

TCP 网络协议 HTTP websocket 12月月更

论文解读丨【CVPR 2022】不使用人工标注提升文字识别器性能

华为云开发者联盟

人工智能 华为云 文字识别 12 月 PK 榜

软件测试 | 测试开发 | 一文搞定 Postman 接口自动化测试

测吧(北京)科技有限公司

【观看直播有礼】第三届云原生实战峰会正式官宣启动

阿里巴巴云原生

阿里云 云原生 实战峰会

手写现代前端框架diff算法-前端面试进阶

helloworld1024fd

JavaScript

前端一面必会react面试题(附答案)

beifeng1996

React

新项目为什么决定用 JDK 17了

古时的风筝

Java JVM jdk17

跨平台应用开发进阶(二十八) :资源加载速度优化解决方案

No Silver Bullet

跨平台 12月月更 资源加载优化

ZBC成功上线PancakeSwap的糖浆池,并有望在不久上线Binance

小哈区块

跨平台应用开发进阶(二十九) :uni-app 实现Android原生APP-云打包集成神策详细教程

No Silver Bullet

uni-app android 跨平台应用 云打包 12月月更

问:React的useState和setState到底是同步还是异步呢?

beifeng1996

React

社招前端一面必会react面试题集锦

beifeng1996

React

百度APP Android包体积优化实践(四)Dex注解优化

百度Geek说

Java android 前端 12 月 PK 榜

Vue的computed和watch的区别是什么?

bb_xiaxia1998

Vue

贾斯特里尼&布鲁克斯,葡萄酒中的天花板

联营汇聚

数据可视化图表系列解析——折线图

Data 探险实验室

数据分析 可视化 数据可视化 可视化数据 折线图与饼图

分布式注册服务中心etcd在云原生引擎中的实践

京东科技开发者

分布式 云原生 etcd 集群 go语言

天翼云Serverless边缘容器,为云上创新开启加速度

天翼云开发者社区

云计算 边缘计算 边缘容器

【论文推荐】TDSC2022 安全补丁识别最新的方案E-SPI

华为云开发者联盟

后端 开发 华为云 12 月 PK 榜

数据分析架构新变革?Doris Summit 2022 议程首公布!|即刻报名

SelectDB

Doris summit 峰会报名 大数据 开源 数据库·

海量监控数据处理如何做,看华为云SRE案例分享

华为云开发者联盟

数据库 后端 华为云 12 月 PK 榜

社招前端一面经典手写面试题(边面边更)

helloworld1024fd

JavaScript

手把手教你一套完善且高效的k8s离线部署方案

京东科技开发者

Docker k8s ansible ulimit 云计算,

区块链+物联网,如何解决农产品溯源之痛?

旺链科技

区块链 物联网 产业区块链 农产品 12 月 PK 榜

问:你是如何进行react状态管理方案选择的?

beifeng1996

React

实用指南:手把手搭建坚若磐石的DevSecOps框架

SEAL安全

DevSecOps 12 月 PK 榜 DevSecOps框架 实用指南

HummerRisk V0.7.0:支持京东云、webhook、PDF下载等

HummerCloud

云安全 云原生安全

重磅干货!一文读懂「企业级架构」

极狐GitLab

DevOps geo 高可用架构 ha 企业级代码架构

低碳机关先行,昆明引领分布式光伏新变革

极客天地

先到先学!阿里新产Spring全家桶核心笔记,底层源码+应用全覆盖

程序员小毕

spring 源码 后端 架构师 java面试

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