Flutter通过BasicMessageChannel与Android iOS 的双向通信

简介: 通过 Flutter 来进行移动应用开发,打包 Android 、iOS 双平台应用程序,在调用如相机、蓝牙、录音、闹钟、屏保等等系列功能时,需要与原生Android、iOS进行消息通信,或者可描述为把数据由 Flutter 传向 Android 、iOS,或者由原生的 Android 、iOS传向 Flutter。

更多文章请查看 flutter从入门 到精通

本文章中的完整代码在这里

题记:不到最后时刻,千万别轻言放弃,无论结局成功与否,只要你拼博过,尽力过,一切问心无愧。


通过 Flutter 来进行移动应用开发,打包 Android 、iOS 双平台应用程序,在调用如相机、蓝牙、录音、闹钟、屏保等等系列功能时,需要与原生Android、iOS进行消息通信,或者可描述为把数据由 Flutter 传向 Android 、iOS,或者由原生的 Android 、iOS传向 Flutter。


Flutter 与 Android iOS 原生的通信有以下三种方式

  • BasicMessageChannel 实现 Flutter 与 原生(Android 、iOS)双向通信
  • MethodChannel 实现 Flutter 与 原生原生(Android 、iOS)双向通信
  • EventChannel 实现 原生原生(Android 、iOS)向Flutter 发送消息

本文将实现:(通过 BasicMessageChannel)

  • 实现 Flutter 调用 Android 、iOS 原生的方法并回调Flutter
  • 实现 Flutter 调用 Android 、iOS 原生并打开Android 原生的一个Activity页面,iOS原生的一个ViewController 页面
  • 实现 Android 、iOS 原生主动发送消息到 Flutter 中
  • 实现 Android 、iOS 原生中的 TestActivity 页面主动发送消息到Flutter中

Android 中的效果
在这里插入图片描述
ios 中的效果
在这里插入图片描述


前言

    例如我们要实现 A 调用 B,B就会触发,B再调用A,A就会触发这样的功能,
    那么我们就需要在 A 中设置 被B调用的监听方法,在B中设置被A 调用的监听方法 

1 实现Flutter 调用 Andoid iOS原生方法并回调

    在这里约定的数据格式为 {"code":100,"message":"消息","content":内容}
    也就是说双向发送消息,可能会有多种消息类型来调用不同的功能,
    统一约定数据格式 可以达到编码的规范性和代码的可维护性
1.1 实现 Flutter 中调用方法
  String recive = "";

  //创建 BasicMessageChannel
  // flutter_and_native_100 为通信标识
  // StandardMessageCodec() 为参数传递的 编码方式
  static const messageChannel = const BasicMessageChannel(
      'flutter_and_native_100', StandardMessageCodec());

  //发送消息
  Future<Map> sendMessage(Map arguments) async {
    Map reply = await messageChannel.send(arguments);
    //解析 原生发给 Flutter 的参数
    int code = reply["code"];
    String message = reply["message"];

    //更新 Flutter 中页面显示
    setState(() {
      recive = "code:$code message:$message";
    });
    return reply;
  }

触发调用 ,分别在 三个 Button 的点击事件中触发

//Flutter 向 Android iOS 中基本的发送消息方式
sendMessage({"method": "test", "ontent": "flutter 中的数据", "code": 100});
//用来实现 Android iOS 主动触发 向 Flutter 中发送消息
sendMessage({"method": "test2", "ontent": "flutter 中的数据", "code": 100});
//用来实现 Flutter 打开 Android iOS 中的一个新的页面
sendMessage({"method": "test3", "ontent": "flutter 中的数据", "code": 100});
1.2 实现实现 Android 中监听方法并回调

Android 的 MainActivity 中注册消息监听

flutter 更新之后 FlutterActivity 中没有 getFlutterView() 方法
使用 getFlutterEngine().getDartExecutor().getBinaryMessenger()代替。

    private BasicMessageChannel<Object> mMessageChannel;
    
    private void messageChannelFunction() {
        //消息接收监听
        //BasicMessageChannel (主要是传递字符串和一些半结构体的数据)
        //创建通
        mMessageChannel = new BasicMessageChannel<Object>(getFlutterView(), "flutter_and_native_100", StandardMessageCodec.INSTANCE);
        // 接收消息监听
        mMessageChannel.setMessageHandler(new BasicMessageChannel.MessageHandler<Object>() {
            @Override
            public void onMessage(Object o, BasicMessageChannel.Reply<Object> reply) {
                messageController(o,reply);
            }
        });
        
    }
    
    ///消息的解析处理
    privite void messageController(Object o, BasicMessageChannel.Reply<Object> reply){
    
        Map<Object, Object> arguments = (Map<Object, Object>) o;
        
        //方法名标识
        String lMethod = (String) arguments.get("method");
        
        //测试 reply.reply()方法 发消息给Flutter
        if (lMethod.equals("test")) {
            Toast.makeText(mContext, "flutter 调用到了 android test", Toast.LENGTH_SHORT).show();
            //回调Flutter  
            Map<String, Object> resultMap = new HashMap<>();
            resultMap.put("message", "reply.reply 返回给flutter的数据");
            resultMap.put("code", 200);
            //回调 此方法只能使用一次 向Flutter中反向回调消息
            reply.reply(resultMap);
            
        } else if (lMethod.equals("test2")) {
            //测试 mMessageChannel.send 发消息给Flutter
            //Android 可通过这个方法来主动向 Flutter中发送消息
            //只有Flutter 中注册了消息监听 才能接收到这个方法向 Flutter 中发送的消息
            channelSendMessage();
        } else if (lMethod.equals("test3")) {
            //测试通过Flutter打开Android Activity
            Toast.makeText(mContext, "flutter 调用到了 android test3", Toast.LENGTH_SHORT).show();
            Intent lIntent = new Intent(MainActivity.this, TestBasicMessageActivity.class);
            MainActivity.this.startActivity(lIntent);
        }
        
}
    
1.3 实现实现 iOS 中监听方法 并回调

iOS 的 AppDelegate 中

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import <Flutter/Flutter.h>
//TestViewController 是创建的一个 测试页面
#import "TestViewController.h"

@implementation AppDelegate{
    FlutterBasicMessageChannel* messageChannel;
}

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [GeneratedPluginRegistrant registerWithRegistry:self];
        ... ... 
    //FlutterBasicMessageChannel 与Flutter 之间的双向通信
    [self BasicMessageChannelFunction];

        ... ... 
    
    
    
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}


-(void) BasicMessageChannelFunction{
    //获取当前的 controller
    FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;
    // 初始化定义
    // flutter_and_native_100 j 
    messageChannel = [FlutterBasicMessageChannel messageChannelWithName:@"flutter_and_native_100" binaryMessenger:controller];
    
    // 接收消息监听
    [messageChannel setMessageHandler:^(id message, FlutterReply callback) {
        
        NSString *method=message[@"method"];
        if ([method isEqualToString:@"test"]) {
            
            NSLog(@"flutter 调用到了 ios test");
            NSMutableDictionary *dic = [NSMutableDictionary dictionary];
            
            [dic setObject:@"[messageChannel setMessageHandler:^(id message, FlutterReply callback)  返回给flutter的数据" forKey:@"message"];
            [dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];
            
            
            callback(dic);
            
        }else  if ([method isEqualToString:@"test2"]) {
            NSLog(@"flutter 调用到了 ios test2");
            NSMutableDictionary *dic = [NSMutableDictionary dictionary];
            [dic setObject:@"[messageChannel sendMessage:dic] 返回给flutter的数据" forKey:@"message"];
            [dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];
            //通过这个方法 iOS可以主动多次 向 Flutter 发送消息
            [messageChannel sendMessage:dic];
        }else  if ([method isEqualToString:@"test3"]) {
            NSLog(@"flutter 调用到了 ios test3 打开一个新的页面 ");
            TestViewController *testController = [[TestViewController alloc]initWithNibName:@"TestViewController" bundle:nil];
            [controller presentViewController:testController animated:YES completion:nil];
        }
    }];
    
}

@end

2 Android 、iOS 原生主动发送消息到 Flutter 中

2.1 实现Android 中主动调动调用方法

在MainActivity中,创建了 BasicMessageChannel

    
    private void channelSendMessage() {
        
        Toast.makeText(mContext, "flutter 调用到了 android test", Toast.LENGTH_SHORT).show();
        //构建参数 
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("message", "reply.reply 返回给flutter的数据");
        resultMap.put("code", 200);
        //向 Flutter 中发送消息
        //参数 二可以再次接收到 Flutter 中的回调
        //也可以直接使用 mMessageChannel.send(resultMap)
        mMessageChannel.send(resultMap, new BasicMessageChannel.Reply<Object>() {
            @Override
            public void reply(Object o) {
                
                Log.d("mMessageChannel", "mMessageChannel send 回调 " + o);
            }
        });
    }
    

在其他的 Activity 页面中,我们就使用不到这个实例的,我这里的一个实现 Android 中新建的Activity 页面向 Flutter 中发送消息的方法 是广播机制

在 MainActivity 中注册广播,在广播接收者中通过 BasicMessageChannel

在 Android 中其他的页面中 发送广播到 MainActivity 中的广播接收者中,这样就实现了Android 中新建的Activity 页面向 Flutter 中发送消息

public class MainActivity extends FlutterActivity {
    
    
    ... ...
    
    Handler mHandler = new Handler(Looper.myLooper());
    private MainReceiver mMainReceiver;
    
    @Override
    protected void onDestroy() {
        super.onDestroy();
        //注销广播
        unregisterReceiver(mMainReceiver);
    }
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        ... ...
        //注册广播
        mMainReceiver = new MainReceiver();
        IntentFilter lIntentFilter = new IntentFilter("android.to.flutter");
        registerReceiver(mMainReceiver, lIntentFilter);
        
        
    }
    
    
    public class MainReceiver extends BroadcastReceiver {
        public MainReceiver() {
        }
        
        @Override
        public void onReceive(Context context, Intent intent) {
            Toast.makeText(context, "接收到自定义的广播", Toast.LENGTH_SHORT).show();
            mHandler.post(new Runnable() {
                @Override
                public void run() {
                    Map<String, Object> resultMap2 = new HashMap<>();
                    resultMap2.put("message", "android 主动调用 flutter test 方法");
                    resultMap2.put("code", 200);
                    
                    if (mMessageChannel != null) {
                        // 向Flutter 发送消息
                        mMessageChannel.send(resultMap2, new BasicMessageChannel.Reply<Object>() {
                            @Override
                            public void reply(Object o) {
                                System.out.println("android onReply: " + o);
                            }
                        });
                    }
                    
                }
            });
        }
    }
}
2.2 实现 Flutter 中监听调用方法
 //创建 BasicMessageChannel
  // flutter_and_native_100 为通信标识
  // StandardMessageCodec() 为参数传递的 编码方式
  static const messageChannel = const BasicMessageChannel(
      'flutter_and_native_100', StandardMessageCodec());

  //接收消息监听
  void receiveMessage() {
    messageChannel.setMessageHandler((result) async {
      //解析 原生发给 Flutter 的参数
      int code = result["code"];
      String message = result["message"];

      setState(() {
        recive = "receiveMessage: code:$code message:$message";
      });
      return 'Flutter 已收到消息';
    });
  }
2.3 实现 iOS 中主动调动调用方法
#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import <Flutter/Flutter.h>
#import "TestViewController.h"

@implementation AppDelegate{
    FlutterBasicMessageChannel* messageChannel;
}

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [GeneratedPluginRegistrant registerWithRegistry:self];
    
    
    //注册通知
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(notificationFuncion:) name:@"ios.to.flutter" object:nil];
    
    ... ...
    
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

   ... ... 

- (void)notificationFuncion: (NSNotification *) notification {
    // iOS 中其他页面向Flutter 中发送消息通过这里
    // 本页中 可以直接使用   [messageChannel sendMessage:dic];
    //处理消息
    NSLog(@"notificationFuncion ");
    NSMutableDictionary *dic = [NSMutableDictionary dictionary];
    if (messageChannel!=nil) {
        [dic setObject:@" [messageChannel sendMessage:dic]; 向Flutter 发送消息 " forKey:@"message"];
        [dic setObject: [NSNumber numberWithInt:401] forKey:@"code"];
        //主动向Flutter 中发送消息
        [messageChannel sendMessage:dic];
    }
    
}

- (void)dealloc {
    //单条移除观察者
    //[[NSNotificationCenter defaultCenter] removeObserver:self name:@"REFRESH_TABLEVIEW" object:nil];
    //移除所有观察者
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}
@end

公众号 我的大前端生涯

相关文章
|
11天前
|
安全 Android开发 数据安全/隐私保护
深入探讨iOS与Android系统安全性对比分析
在移动操作系统领域,iOS和Android无疑是两大巨头。本文从技术角度出发,对这两个系统的架构、安全机制以及用户隐私保护等方面进行了详细的比较分析。通过深入探讨,我们旨在揭示两个系统在安全性方面的差异,并为用户提供一些实用的安全建议。
|
2天前
|
Android开发 Swift iOS开发
深入探索iOS与Android操作系统的架构差异及其对应用开发的影响
在当今数字化时代,移动设备已经成为我们日常生活和工作不可或缺的一部分。其中,iOS和Android作为全球最流行的两大移动操作系统,各自拥有独特的系统架构和设计理念。本文将深入探讨iOS与Android的系统架构差异,并分析这些差异如何影响应用开发者的开发策略和用户体验设计。通过对两者的比较,我们可以更好地理解它们各自的优势和局限性,从而为开发者提供有价值的见解,帮助他们在这两个平台上开发出更高效、更符合用户需求的应用。
|
20天前
|
移动开发 Dart 搜索推荐
打造个性化安卓应用:从零开始的Flutter之旅
【10月更文挑战第20天】本文将引导你开启Flutter开发之旅,通过简单易懂的语言和步骤,让你了解如何从零开始构建一个安卓应用。我们将一起探索Flutter的魅力,实现快速开发,并见证代码示例如何生动地转化为用户界面。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供价值。
|
21天前
|
安全 搜索推荐 Android开发
揭秘iOS与Android系统的差异:一场技术与哲学的较量
在当今数字化时代,智能手机操作系统的选择成为了用户个性化表达和技术偏好的重要标志。iOS和Android,作为市场上两大主流操作系统,它们之间的竞争不仅仅是技术的比拼,更是设计理念、用户体验和生态系统构建的全面较量。本文将深入探讨iOS与Android在系统架构、应用生态、用户界面及安全性等方面的本质区别,揭示这两种系统背后的哲学思想和市场策略,帮助读者更全面地理解两者的优劣,从而做出更适合自己的选择。
|
12天前
|
安全 Android开发 iOS开发
深入探索iOS与Android系统的差异性及优化策略
在当今数字化时代,移动操作系统的竞争尤为激烈,其中iOS和Android作为市场上的两大巨头,各自拥有庞大的用户基础和独特的技术特点。本文旨在通过对比分析iOS与Android的核心差异,探讨各自的优势与局限,并提出针对性的优化策略,以期为用户提供更优质的使用体验和为开发者提供有价值的参考。
|
1月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
74 7
|
2月前
|
开发框架 搜索推荐 开发工具
打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第51天】本文是一篇面向初学者的Flutter入门教程,旨在通过简单易懂的语言和实际代码示例,引导读者步入跨平台移动应用开发的世界。文章首先介绍了Flutter的基本概念和优势,然后逐步展示了如何搭建开发环境、创建第一个Flutter应用,并实现了一个简单的待办事项列表。最后,文章探讨了Flutter在实现高性能和美观界面方面的潜力,鼓励读者发挥创意,探索更多可能。
85 15
|
2月前
|
Dart 开发工具 Android开发
在 Android 系统上搭建 Flutter 环境的具体步骤是什么?
在 Android 系统上搭建 Flutter 环境的具体步骤是什么?
|
2月前
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言,提供接近原生的性能和丰富的组件库;React Native 则基于 JavaScript,具备庞大的社区支持和灵活性。两者各有优势,选择时需考虑团队技能和项目需求。
332 8
|
2月前
|
Java Android开发 数据安全/隐私保护
Android中多进程通信有几种方式?需要注意哪些问题?
本文介绍了Android中的多进程通信(IPC),探讨了IPC的重要性及其实现方式,如Intent、Binder、AIDL等,并通过一个使用Binder机制的示例详细说明了其实现过程。
302 4