跨端开发实战：通过BasicMessageChannel实现 Flutter 与Android iOS 的双向通信

"IT有得聊”是机械工业出版社旗下IT专业资讯和服务平台，致力于帮助读者在广义的IT领域里，掌握更专业、更实用的知识与技能，快速提升职场竞争力。 点击蓝色微信名可快速关注我们！

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 中注册消息监听flflutter 更新之后 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) {
        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);
          //回调 此方法只能使用一次
          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 的实例 mMessageChannel，可以在 MainActivity 中直接使用 mMessageChannel 实例来向 Flutter 中发送消息。

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 的实例mMessageChannel 来发送消息。

在 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

3

免费直播课程

12月30日（周四）

华为HDE认证专家

CSDN认证年度博客专家

网易云课堂“玩转大前端”网校创始人

赵龙 老师

为您带来免费直播课：

​Flutter APP开发实践​​

开放时间：2021年12月30日（周四）20:00主讲老师：赵龙课程类型：视频直播观看平台： 九州云播平台                   京东直播平台                   当当直播平台                    机械工业出版社“IT有得聊”视频号

​​

作者：赵龙 编著

关键词：Flutter 跨端 移动端 移动开发 适合人群：移动端开发工程师、前端开发工程师，以及希望快速入门Flutter 移动端开发的读者本书旨在帮助读者快速入门Flutter、掌握Flutter开发技能，从而具备一定的Flutter跨平台开发能力。本书在内容编排上主要分为以下三个部分。第一部分（第1~5章）是UI构建基础篇，纵向概述Flutter开发中用到的基础组件（如Text、Image）、UI布局组件（如Column）、滑动组件（如NestScrollView）和功能性组件（如手势识别）等。第二部分（第6~10章）是Flutter核心功能篇，涵盖动画、弹框、绘图、插件开发、文件操作与网络请求等。第三部分（第11~13章）是实战应用篇，将前两部分的内容加以应用，并补充开发细节，如应用图标配置、打包发布、权限请求、各种工具类封装，还提供了一个APP的基础架构以及短视频应用与电商类应用。读者可以直接在本书提供的源码基础上搭建企业级的应用。

讲师介绍

赵龙

赵龙，华为HDE认证专家，CSDN认证年度博客专家，网易云课堂“玩转大前端”网校创始人。先后从事过Java EE 领域、Android开发架构领域、iOS开发领域、产品设计领域相关工作。同时对React native 、Uni-app、Flutter跨平台开发有系统和丰富的开发与架构实战经验。

曾在CSDN技术平台撰有“Flutter开发的点滴积累”系列专栏，通过100多篇技术文章帮助广大开发者解决了在Flutter开发中遇到的疑难问题。​