【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 EventChannel 通信 )

简介: 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 EventChannel 通信 )

文章目录

一、EventChannel 简介

二、EventChannel 在 Dart 端的实现

1、EventChannel 构造方法

2、创建广播流 Stream

3、设置监听回调函数

4、EventChannel 使用流程






一、EventChannel 简介


EventChannel 一般用于持续的通信 , 如 : 将 Android 应用中采集的陀螺仪 , GPS 等信息 , 持续的发送给 Flutter 应用 ;


该通信时单向的 , 收到信息的一方无法回复 ;






二、EventChannel 在 Dart 端的实现



1、EventChannel 构造方法


EventChannel 的构造函数原型如下 :


class EventChannel {
  /// Creates an [EventChannel] with the specified [name].
  ///
  /// The [codec] used will be [StandardMethodCodec], unless otherwise
  /// specified.
  ///
  /// Neither [name] nor [codec] may be null. The default [ServicesBinding.defaultBinaryMessenger]
  /// instance is used if [binaryMessenger] is null.
  const EventChannel(this.name, [this.codec = const StandardMethodCodec(), BinaryMessenger? binaryMessenger])
      : assert(name != null),
        assert(codec != null),
        _binaryMessenger = binaryMessenger;
  /// The logical channel on which communication happens, not null.
  final String name;
  /// The message codec used by this channel, not null.
  final MethodCodec codec;
}


EventChannel 构造方法参数说明 :


String name 参数 : Channel 通道名称 , Native 应用端 与 Flutter 中的 Channel 名称 , 必须一致 ;


MethodCodec<T> codec 参数 : 消息编解码器 , 默认类型是 StandardMethodCodec ; Native 应用端 与 Flutter 中的消息编解码器也要保持一致 ;



2、创建广播流 Stream


创建了 EventChannel 实例对象之后 , 调用


/// Sets up a broadcast stream for receiving events on this channel.
  ///
  /// Returns a broadcast [Stream] which emits events to listeners as follows:
  ///
  /// * a decoded data event (possibly null) for each successful event
  ///   received from the platform plugin;
  /// * an error event containing a [PlatformException] for each error event
  ///   received from the platform plugin.
  ///
  /// Errors occurring during stream activation or deactivation are reported
  /// through the [FlutterError] facility. Stream activation happens only when
  /// stream listener count changes from 0 to 1. Stream deactivation happens
  /// only when stream listener count changes from 1 to 0.
  Stream<dynamic> receiveBroadcastStream([ dynamic arguments ]) {
  }


方法 , 可以创建一个 广播流 Stream , 调用该 Stream 实例对象的 listen 方法 , 可以注册消息持续监听 , 用于从 Channel 消息通道中持续接收消息 ; 如果要停止监听 , 可以调用 Stream 的 cancel 方法 ;


receiveBroadcastStream 方法参数 / 返回值 说明 :


[ dynamic arguments ] 参数 : 监听 Native 传递来的消息时 , 向 Native 传递的数据 ;

Stream<dynamic> 返回值 : 创建的监听用的广播流 ;


注意 : 消息的监听 , 和 取消监听 , 一定个要一一对应 , 防止出现



3、设置监听回调函数


调用 Stream 的 listen 方法 , 传入两个方法参数 ,


 

StreamSubscription<T> listen(void onData(T event)?,
      {Function? onError, void onDone()?, bool? cancelOnError});


第一个参数 void onData(T event) , 参数为 T 泛型 , 返回值 void , 这是消息到来后回调的函数 ;


Function? onError 参数 , 参数 和 返回值都是 void , 这是出现错误后回调的函数 ;



代码示例 :


 

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


4、EventChannel 使用流程


使用流程 :


首先 , 导入 Flutter 与 Native 通信 的 Dart 包 ;


import 'package:flutter/services.dart';
import 'dart:async';


然后 , 定义并实现 EventChannel 对象实例 ;


static const EventChannel _eventChannel =
    EventChannel('EventChannel');
  /// 监听 EventChannel 数据的句柄
  late StreamSubscription _streamSubscription;


接着 , 创建广播流 , 并监听消息 , 一般在 initState 方法中设置监听 ;


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


最后 , 如果监听完毕 , 取消监听 ; 这样可以防止不必要的内存泄漏 ;


@override
  void dispose() {
    // 取消监听
    _streamSubscription.cancel();
    super.dispose();
  }




目录
相关文章
|
8月前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
217 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
12月前
|
前端开发 JavaScript Android开发
Flutter 与 React Native - 详细深入对比分析(2024 年)
Flutter和React Native是两大跨平台框架,各有优缺点。Flutter性能优越,UI灵活,使用Dart;React Native生态广泛,适合JavaScript开发。
3190 6
Flutter 与 React Native - 详细深入对比分析(2024 年)
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言,提供接近原生的性能和丰富的组件库;React Native 则基于 JavaScript,具备庞大的社区支持和灵活性。两者各有优势,选择时需考虑团队技能和项目需求。
783 8
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
269 27
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
317 1
|
安全 Shell Android开发
Flutter和Native 通信 pigeon
Flutter和Native 通信 pigeon
|
Dart Android开发 Windows
Flutter和Native 通信 android端
Flutter和Native 通信 android端
|
9月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
117 1
|
8月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
414 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
294 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈