【错误记录】Flutter 混合开发报错 ( Android 端与 Flutter 端 EventChannel 初始化顺序错误导致无法通信 | EventChannel 通信流程 )

简介: 【错误记录】Flutter 混合开发报错 ( Android 端与 Flutter 端 EventChannel 初始化顺序错误导致无法通信 | EventChannel 通信流程 )

文章目录

一、 报错信息

二、 Android 端与 Flutter 端 EventChannel 注册与监听流程

三、 解决方案





一、 报错信息


在 Android 端初始化 EventChannel ,


// 初始化 EventChannel 实例对象
EventChannel mEventChannel = new EventChannel(
        mFlutterFragment.getFlutterEngine().getDartExecutor(),
        "EventChannel");


然后设置 EventChannel.StreamHandler ;


mEventChannel.setStreamHandler(new EventChannel.StreamHandler() {
    /**
     * 事件流建立成功会回调该方法
     * @param arguments
     * @param events
     */
    @Override
    public void onListen(Object arguments, EventChannel.EventSink events) {
        mEventSink = events;
        Log.i(TAG, "事件流建立成功");
    }
    @Override
    public void onCancel(Object arguments) {
        mEventSink = null;
    }
});


出现 onListen , 死活不回调 , 说明事件流 , 始终没有创建成功 ;


检查了下 Flutter 端的 代码 , 没有发现问题 ;


// 注册 EventChannel 监听
_streamSubscription = _eventChannel
    .receiveBroadcastStream()
/// StreamSubscription<T> listen(void onData(T event)?,
///   {Function? onError, void onDone()?, bool? cancelOnError});
    .listen(
  /// EventChannel 接收到 Native 信息后 , 回调的方法
        (message) {
      print("Flutter _eventChannel listen 回调");
      setState(() {
        /// 接收到消息 , 显示在界面中
        showMessage = message;
      });
    },
    onError: (error){
      print("Flutter _eventChannel listen 出错");
      print(error);
    }
);






二、 Android 端与 Flutter 端 EventChannel 注册与监听流程


Android 端与 Flutter 端 EventChannel 注册与监听流程 :


① Android 端 初始化 EventChannel ;


// 初始化 EventChannel 实例对象
mEventChannel = new EventChannel(
        mFlutterFragment.getFlutterEngine().getDartExecutor(),
        "EventChannel");


② Android 端为 EventChannel 设置 EventChannel.StreamHandler ;


mEventChannel.setStreamHandler(new EventChannel.StreamHandler() {

 

/**
     * 事件流建立成功会回调该方法
     * @param arguments
     * @param events
     */
    @Override
    public void onListen(Object arguments, EventChannel.EventSink events) {
        mEventSink = events;
        Log.i(TAG, "事件流建立成功");
    }
    @Override
    public void onCancel(Object arguments) {
        mEventSink = null;
    }
});


③ Flutter 端注册监听 ;


// 注册 EventChannel 监听
_streamSubscription = _eventChannel
    .receiveBroadcastStream()
/// StreamSubscription<T> listen(void onData(T event)?,
///   {Function? onError, void onDone()?, bool? cancelOnError});
    .listen(
  /// EventChannel 接收到 Native 信息后 , 回调的方法
        (message) {
      print("Flutter _eventChannel listen 回调");
      setState(() {
        /// 接收到消息 , 显示在界面中
        showMessage = message;
      });
    },
    onError: (error){
      print("Flutter _eventChannel listen 出错");
      print(error);
    }
);


④ Android 端的 EventChannel.StreamHandler 接口的 onListen 回调 , 此时可以在 Android 端持有 EventChannel.EventSink events , 可以借助该对象向 Flutter 发送数据 ;


/**
 * 事件流建立成功会回调该方法
 * @param arguments
 * @param events
 */
@Override
public void onListen(Object arguments, EventChannel.EventSink events) {
    mEventSink = events;
    Log.i(TAG, "事件流建立成功");
}


⑥ Android 端调用 EventChannel.EventSink 发送数据 ;


// 点击按钮 , 向 Flutter 端发送数据
if (mEventSink != null) {
    mEventSink.success("Native 通过 EventChannel 通道发送消息 Hello !");
}


⑦ Flutter 端接收到 Android 端发送的数据 ; 回调 listen 方法的如下匿名方法参数 ;


(message) {
  print("Flutter _eventChannel listen 回调");
  setState(() {
    /// 接收到消息 , 显示在界面中
    showMessage = message;
  });


上述流程 , 必须按照顺序执行 , 否则注册监听失败 ;






三、 解决方案


在执行时 , 先执行了 Flutter 的注册监听操作 , 然后才执行 Android 中的初始化 EventChannel 对象 , 并设置 EventChannel.StreamHandler() ;


Android 端与 Flutter 端 EventChannel 初始化顺序错误 , 导致 Android 端的 EventChannel.StreamHandler 接口的 onListen 方法 , 始终无法进行回调 ;


这里将 Flutter 端的初始化操作 , 延迟几秒 , 先让 Android 端的 EventChannel 进行初始化 , 然后在 Flutter 端注册 EventChannel 监听 ;


 

/// 这里延迟 6 秒在注册该事件
    ///   一定要先在 Android 中设置好 EventChannel
    ///   然后 , 才能在 Flutter 中设置监听
    ///   否则 , 无法成功
    Future.delayed(const Duration(milliseconds: 6000), () {
      // Here you can write your code
      // 注册 EventChannel 监听
      _streamSubscription = _eventChannel
          .receiveBroadcastStream()
      /// StreamSubscription<T> listen(void onData(T event)?,
      ///   {Function? onError, void onDone()?, bool? cancelOnError});
          .listen(
        /// EventChannel 接收到 Native 信息后 , 回调的方法
            (message) {
              print("Flutter _eventChannel listen 回调");
              setState(() {
                /// 接收到消息 , 显示在界面中
                showMessage = message;
              });
          },
          onError: (error){
            print("Flutter _eventChannel listen 出错");
            print(error);
          }
      );
      setState(() {
      });
    });


Flutter 端成功接收到了 Android 端通过 EventChannel 向其发送的消息 ;



目录
相关文章
|
2月前
|
开发工具 Android开发 iOS开发
如何在Android Studio中配置Flutter环境?
如何在Android Studio中配置Flutter环境?
572 61
|
2月前
|
存储 Android开发 数据安全/隐私保护
如何在Android设备上撤销Flutter应用程序的所有权限?
如何在Android设备上撤销Flutter应用程序的所有权限?
180 64
|
2月前
|
缓存 Android开发 开发者
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
453 62
|
2月前
|
开发工具 Android开发 开发者
在Android设备上运行Flutter应用程序时,如果遇到设备未授权的问题该如何解决?
在Android设备上运行Flutter应用程序时,如果遇到设备未授权的问题该如何解决?
197 61
|
4月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
278 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
4月前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
382 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
3月前
|
索引
【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
在 Flutter 开发中,AzListView 是实现字母索引分类列表的理想选择。它支持 A-Z 快速跳转、悬浮分组标题、自定义 UI 和高效性能,适用于通讯录、城市选择等场景。本文将详细解析 AzListView 的核心参数和实战示例,助你轻松实现流畅的索引列表。
100 7
|
4月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
107 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
API Android开发
【Android 插件化】Hook 插件化框架 ( Hook Activity 启动流程 | Hook 点分析 )(一)
【Android 插件化】Hook 插件化框架 ( Hook Activity 启动流程 | Hook 点分析 )(一)
211 0
【Android 插件化】Hook 插件化框架 ( Hook Activity 启动流程 | Hook 点分析 )(一)
|
Android开发
【Android 插件化】Hook 插件化框架 ( Hook Activity 启动流程 | 主线程创建 Activity 实例之前使用插件 Activity 类替换占位的组件 )(四)
【Android 插件化】Hook 插件化框架 ( Hook Activity 启动流程 | 主线程创建 Activity 实例之前使用插件 Activity 类替换占位的组件 )(四)
222 0