Flutter通过MethodChannel实现Flutter 与Android iOS 的双向通信

Posted 2022-04-16 早起的年轻人

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

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

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

---

Flutter 与 android ios 原生的通信有以下三种方式

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

---

本文将实现：（通过 MethodChannel）

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

Android 中的效果（本图还是 BasicMessageChannel 的效果图，只不过是通过 MethodChannel 方式实现出来了）

ios 中的效果（本图还是 BasicMessageChannel 的效果图，只不过是通过 MethodChannel 方式实现出来了）

---

前言

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

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

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

1.1 实现 Flutter 中调用方法

  //创建MethodChannel
  // flutter_and_native_101 为通信标识
  // StandardMessageCodec() 为参数传递的 编码方式
  static const methodChannel = const MethodChannel('flutter_and_native_101');

  //封装 Flutter 向 原生中 发送消息 的方法 
  //method 为方法标识
  //arguments 为参数
  static Future<dynamic> invokNative(String method, Map arguments) async 
    if (arguments == null) 
      //无参数发送消息
      return await methodChannel.invokeMethod(method);
     else 
      //有参数发送消息
      return await methodChannel.invokeMethod(method, arguments);
    
  

触发调用 ,分别在 三个 Button 的点击事件中触发，下面均无向 原生 Android iOS 传递参数

   invokNative("test")
     ..then((result) 
        //第一种 原生回调 Flutter 的方法
        //此方法只能使用一次
        int code = result["code"];
        String message = result["message"];
       setState(() 
          recive = "invokNative 中的回调 code $code message $message ";
        );
   );
//用来实现 Android iOS 主动触发 向 Flutter 中发送消息
invokNative("test2");
//用来实现 Flutter 打开 Android iOS 中的一个新的页面
invokNative("test3");

1.2 实现实现 Android 中监听方法并回调

Android 的 MainActivity 中注册消息监听

	private MethodChannel mMethodChannel;
	//记着要在 onCreat方法中调用
	private void methodChannelFunction() 
		mMethodChannel = new MethodChannel(getFlutterView(), "flutter_and_native_101");
		//设置监听
		mMethodChannel.setMethodCallHandler(
				new MethodChannel.MethodCallHandler() 
					@Override
					public void onMethodCall(MethodCall call, MethodChannel.Result result) 
						String lMethod = call.method;
						// TODO
						if (lMethod.equals("test")) 
							Toast.makeText(mContext, "flutter 调用到了 android test", Toast.LENGTH_SHORT).show();
							Map<String, Object> resultMap = new HashMap<>();
							resultMap.put("message", "result.success 返回给flutter的数据");
							resultMap.put("code", 200);
							//发消息至 Flutter 
							//此方法只能使用一次
							result.success(resultMap);
							
						 else if (lMethod.equals("test2")) 
							Toast.makeText(mContext, "flutter 调用到了 android test2", Toast.LENGTH_SHORT).show();
							Map<String, Object> resultMap = new HashMap<>();
							resultMap.put("message", "android 主动调用 flutter test 方法");
							resultMap.put("code", 200);
							//主动向Flutter 中发送消息
							mMethodChannel.invokeMethod("test", resultMap);
							//延迟2秒再主动向 Flutter 中发送消息
							mHandler.postDelayed(new Runnable() 
								@Override
								public void run() 
									Map<String, Object> resultMap2 = new HashMap<>();
									resultMap2.put("message", "android 主动调用 flutter test 方法");
									resultMap2.put("code", 200);
									mMethodChannel.invokeMethod("test2", resultMap2);
								
							, 2000);
							
							
						 else if (lMethod.equals("test3")) 
							//测试通过Flutter打开Android Activity
							Toast.makeText(mContext, "flutter 调用到了 android test3", Toast.LENGTH_SHORT).show();
							Intent lIntent = new Intent(MainActivity.this, TestMethodChannelActivity.class);
							MainActivity.this.startActivity(lIntent);
						 else 
							result.notImplemented();
						
					
				
		);
	
	

1.3 实现实现 iOS 中监听方法 并回调

iOS 的 AppDelegate 中

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

@implementation AppDelegate
    FlutterMethodChannel* methodChannel;


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

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



-(void) methodChannelFunction
    FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;
    //创建 FlutterMethodChannel
    // flutter_and_native_101 是通信标识
    methodChannel = [FlutterMethodChannel
                     methodChannelWithName:@"flutter_and_native_101"
                     binaryMessenger:controller];
    //设置监听
    [methodChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) 
        // TODO
        NSString *method=call.method;
        if ([method isEqualToString:@"test"]) 
            
            NSLog(@"flutter 调用到了 ios test");
            NSMutableDictionary *dic = [NSMutableDictionary dictionary];
            [dic setObject:@"result.success 返回给flutter的数据" forKey:@"message"];
            [dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];
            //FlutterResult回调 发消息至 Flutter 中
            //此方法只能调用一次
            result(dic);
            
        else  if ([method isEqualToString:@"test2"]) 
            NSLog(@"flutter 调用到了 ios test2");
            NSMutableDictionary *dic = [NSMutableDictionary dictionary];
            [dic setObject:@"result.success 返回给flutter的数据" forKey:@"message"];
            [dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];
            //通过此方法 可以主动向Flutter中发送消息
            //可以多次调用
            [methodChannel invokeMethod:@"test" arguments: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中，创建了 MethodChannel 的实例 mMethodChannel，可以在MainActivity 中直接使用 mMethodChannel 实例来向 Flutter 中发送消息。

	
Map<String, Object> resultMap = new HashMap<>();
resultMap.put("message", "android 主动调用 flutter test 方法");
resultMap.put("code", 200);
//主动向Flutter 中发送消息
mMethodChannel.invokeMethod("test", resultMap);

在其他的 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 (mMethodChannel != null) 
						// 向Flutter 发送消息
						mMethodChannel.invokeMethod("test2", resultMap2);
					
					
				
			);
		
	

2.2 实现 Flutter 中监听调用方法

 
  //创建MethodChannel
  // flutter_and_native_101 为通信标识
  // StandardMessageCodec() 为参数传递的 编码方式
  static const methodChannel = const MethodChannel('flutter_and_native_101');

  //设置消息监听
  Future<dynamic> nativeMessageListener() async 
    methodChannel.setMethodCallHandler((resultCall) 

      //处理原生 Android iOS 发送过来的消息
      MethodCall call = resultCall;
      String method = call.method;
      Map arguments = call.arguments;

      int code = arguments["code"];
      String message = arguments["message"];
      setState(() 
        recive += " code $code message $message and method $method ";
        print(recive);
      );
    );
  

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"];
        [messageChannel sendMessage:dic];
    
    


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

@end