更多文章請查看 flutter從入門 到精通

本文章中的完整代碼在這里

題記：不到最后時刻，千萬別輕言放棄，無論結局成功與否，只要你拼博過，盡力過，一切問心無愧。

---

通過 Flutter 來進行移動應用開發(fā)，打包 Android 、iOS 雙平臺應用程序，在調(diào)用如相機、藍牙、錄音、鬧鐘、屏保等等系列功能時，需要與原生Android、iOS進行消息通信，或者可描述為把數(shù)據(jù)由 Flutter 傳向 Android 、iOS,或者由原生的 Android 、iOS傳向 Flutter。

---

Flutter 與 Android iOS 原生的通信有以下三種方式

• BasicMessageChannel 實現(xiàn) Flutter 與 原生(Android 、iOS)雙向通信
• MethodChannel 實現(xiàn) Flutter 與 原生原生(Android 、iOS)雙向通信
• EventChannel 實現(xiàn) 原生原生(Android 、iOS)向Flutter 發(fā)送消息

---

本文將實現(xiàn)：（通過 BasicMessageChannel）

• 實現(xiàn) Flutter 調(diào)用 Android 、iOS 原生的方法并回調(diào)Flutter
• 實現(xiàn) Flutter 調(diào)用 Android 、iOS 原生并打開Android 原生的一個Activity頁面,iOS原生的一個ViewController 頁面
• 實現(xiàn) Android 、iOS 原生主動發(fā)送消息到 Flutter 中
• 實現(xiàn) Android 、iOS 原生中的 TestActivity 頁面主動發(fā)送消息到Flutter中

---

Android 中的效果

ios 中的效果

---

前言

例如我們要實現(xiàn) A 調(diào)用 B，B就會觸發(fā)，B再調(diào)用A，A就會觸發(fā)這樣的功能，那么我們就需要在 A 中設置 被B調(diào)用的監(jiān)聽方法，在B中設置被A 調(diào)用的監(jiān)聽方法

1 實現(xiàn)Flutter 調(diào)用 Andoid iOS原生方法并回調(diào)

在這里約定的數(shù)據(jù)格式為 {"code":100,"message":"消息","content":內(nèi)容}也就是說雙向發(fā)送消息，可能會有多種消息類型來調(diào)用不同的功能，統(tǒng)一約定數(shù)據(jù)格式 可以達到編碼的規(guī)范性和代碼的可維護性

1.1 實現(xiàn) Flutter 中調(diào)用方法

String recive = "";//創(chuàng)建 BasicMessageChannel// flutter_and_native_100 為通信標識// StandardMessageCodec() 為參數(shù)傳遞的 編碼方式static const messageChannel = const BasicMessageChannel('flutter_and_native_100', StandardMessageCodec());//發(fā)送消息Future<Map> sendMessage(Map arguments) async {Map reply = await messageChannel.send(arguments);//解析 原生發(fā)給 Flutter 的參數(shù)int code = reply["code"];String message = reply["message"];//更新 Flutter 中頁面顯示setState(() {recive = "code:$code message:$message";});return reply;}

觸發(fā)調(diào)用 ,分別在 三個 Button 的點擊事件中觸發(fā)

//Flutter 向 Android iOS 中基本的發(fā)送消息方式 sendMessage({"method": "test", "ontent": "flutter 中的數(shù)據(jù)", "code": 100}); //用來實現(xiàn) Android iOS 主動觸發(fā) 向 Flutter 中發(fā)送消息 sendMessage({"method": "test2", "ontent": "flutter 中的數(shù)據(jù)", "code": 100}); //用來實現(xiàn) Flutter 打開 Android iOS 中的一個新的頁面 sendMessage({"method": "test3", "ontent": "flutter 中的數(shù)據(jù)", "code": 100});

1.2 實現(xiàn)實現(xiàn) Android 中監(jiān)聽方法并回調(diào)

Android 的 MainActivity 中注冊消息監(jiān)聽

flutter 更新之后 FlutterActivity 中沒有 getFlutterView() 方法
使用 getFlutterEngine().getDartExecutor().getBinaryMessenger()代替。private BasicMessageChannel<Object> mMessageChannel;private void messageChannelFunction() {//消息接收監(jiān)聽//BasicMessageChannel （主要是傳遞字符串和一些半結構體的數(shù)據(jù)）//創(chuàng)建通mMessageChannel = new BasicMessageChannel<Object>(getFlutterView(), "flutter_and_native_100", StandardMessageCodec.INSTANCE);// 接收消息監(jiān)聽mMessageChannel.setMessageHandler(new BasicMessageChannel.MessageHandler<Object>() {@Overridepublic 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()方法 發(fā)消息給Flutterif (lMethod.equals("test")) {Toast.makeText(mContext, "flutter 調(diào)用到了 android test", Toast.LENGTH_SHORT).show();//回調(diào)Flutter Map<String, Object> resultMap = new HashMap<>();resultMap.put("message", "reply.reply 返回給flutter的數(shù)據(jù)");resultMap.put("code", 200);//回調(diào) 此方法只能使用一次 向Flutter中反向回調(diào)消息reply.reply(resultMap);} else if (lMethod.equals("test2")) {//測試 mMessageChannel.send 發(fā)消息給Flutter//Android 可通過這個方法來主動向 Flutter中發(fā)送消息//只有Flutter 中注冊了消息監(jiān)聽 才能接收到這個方法向 Flutter 中發(fā)送的消息channelSendMessage();} else if (lMethod.equals("test3")) {//測試通過Flutter打開Android ActivityToast.makeText(mContext, "flutter 調(diào)用到了 android test3", Toast.LENGTH_SHORT).show();Intent lIntent = new Intent(MainActivity.this, TestBasicMessageActivity.class);MainActivity.this.startActivity(lIntent);}}

1.3 實現(xiàn)實現(xiàn) iOS 中監(jiān)聽方法 并回調(diào)

iOS 的 AppDelegate 中

#include "AppDelegate.h" #include "GeneratedPluginRegistrant.h" #import <Flutter/Flutter.h> //TestViewController 是創(chuàng)建的一個 測試頁面 #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{//獲取當前的 controllerFlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;// 初始化定義// flutter_and_native_100 j messageChannel = [FlutterBasicMessageChannel messageChannelWithName:@"flutter_and_native_100" binaryMessenger:controller];// 接收消息監(jiān)聽[messageChannel setMessageHandler:^(id message, FlutterReply callback) {NSString *method=message[@"method"];if ([method isEqualToString:@"test"]) {NSLog(@"flutter 調(diào)用到了 ios test");NSMutableDictionary *dic = [NSMutableDictionary dictionary];[dic setObject:@"[messageChannel setMessageHandler:^(id message, FlutterReply callback) 返回給flutter的數(shù)據(jù)" forKey:@"message"];[dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];callback(dic);}else if ([method isEqualToString:@"test2"]) {NSLog(@"flutter 調(diào)用到了 ios test2");NSMutableDictionary *dic = [NSMutableDictionary dictionary];[dic setObject:@"[messageChannel sendMessage:dic] 返回給flutter的數(shù)據(jù)" forKey:@"message"];[dic setObject: [NSNumber numberWithInt:200] forKey:@"code"];//通過這個方法 iOS可以主動多次 向 Flutter 發(fā)送消息[messageChannel sendMessage:dic];}else if ([method isEqualToString:@"test3"]) {NSLog(@"flutter 調(diào)用到了 ios test3 打開一個新的頁面 ");TestViewController *testController = [[TestViewController alloc]initWithNibName:@"TestViewController" bundle:nil];[controller presentViewController:testController animated:YES completion:nil];}}];}@end

2 Android 、iOS 原生主動發(fā)送消息到 Flutter 中

2.1 實現(xiàn)Android 中主動調(diào)動調(diào)用方法

在MainActivity中，創(chuàng)建了 BasicMessageChannel的實例 mMessageChannel，可以在MainActivity 中直接使用 mMessageChannel 實例來向 Flutter 中發(fā)送消息。

private void channelSendMessage() {Toast.makeText(mContext, "flutter 調(diào)用到了 android test", Toast.LENGTH_SHORT).show();//構建參數(shù) Map<String, Object> resultMap = new HashMap<>();resultMap.put("message", "reply.reply 返回給flutter的數(shù)據(jù)");resultMap.put("code", 200);//向 Flutter 中發(fā)送消息//參數(shù) 二可以再次接收到 Flutter 中的回調(diào)//也可以直接使用 mMessageChannel.send(resultMap）mMessageChannel.send(resultMap, new BasicMessageChannel.Reply<Object>() {@Overridepublic void reply(Object o) {Log.d("mMessageChannel", "mMessageChannel send 回調(diào) " + o);}});}

在其他的 Activity 頁面中，我們就使用不到這個實例的，我這里的一個實現(xiàn) Android 中新建的Activity 頁面向 Flutter 中發(fā)送消息的方法 是廣播機制

在 MainActivity 中注冊廣播，在廣播接收者中通過 BasicMessageChannel 的實例 mMessageChannel 來發(fā)送消息。
在 Android 中其他的頁面中 發(fā)送廣播到 MainActivity 中的廣播接收者中，這樣就實現(xiàn)了Android 中新建的Activity 頁面向 Flutter 中發(fā)送消息

public class MainActivity extends FlutterActivity {... ...Handler mHandler = new Handler(Looper.myLooper());private MainReceiver mMainReceiver;@Overrideprotected void onDestroy() {super.onDestroy();//注銷廣播unregisterReceiver(mMainReceiver);}@Overrideprotected 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() {}@Overridepublic void onReceive(Context context, Intent intent) {Toast.makeText(context, "接收到自定義的廣播", Toast.LENGTH_SHORT).show();mHandler.post(new Runnable() {@Overridepublic void run() {Map<String, Object> resultMap2 = new HashMap<>();resultMap2.put("message", "android 主動調(diào)用 flutter test 方法");resultMap2.put("code", 200);if (mMessageChannel != null) {// 向Flutter 發(fā)送消息mMessageChannel.send(resultMap2, new BasicMessageChannel.Reply<Object>() {@Overridepublic void reply(Object o) {System.out.println("android onReply: " + o);}});}}});}} }

2.2 實現(xiàn) Flutter 中監(jiān)聽調(diào)用方法

//創(chuàng)建 BasicMessageChannel// flutter_and_native_100 為通信標識// StandardMessageCodec() 為參數(shù)傳遞的 編碼方式static const messageChannel = const BasicMessageChannel('flutter_and_native_100', StandardMessageCodec());//接收消息監(jiān)聽void receiveMessage() {messageChannel.setMessageHandler((result) async {//解析 原生發(fā)給 Flutter 的參數(shù)int code = result["code"];String message = result["message"];setState(() {recive = "receiveMessage: code:$code message:$message";});return 'Flutter 已收到消息';});}

2.3 實現(xiàn) iOS 中主動調(diào)動調(diào)用方法

#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 中發(fā)送消息通過這里// 本頁中 可以直接使用 [messageChannel sendMessage:dic];//處理消息NSLog(@"notificationFuncion ");NSMutableDictionary *dic = [NSMutableDictionary dictionary];if (messageChannel!=nil) {[dic setObject:@" [messageChannel sendMessage:dic]; 向Flutter 發(fā)送消息 " forKey:@"message"];[dic setObject: [NSNumber numberWithInt:401] forKey:@"code"];//主動向Flutter 中發(fā)送消息[messageChannel sendMessage:dic];}}- (void)dealloc {//單條移除觀察者//[[NSNotificationCenter defaultCenter] removeObserver:self name:@"REFRESH_TABLEVIEW" object:nil];//移除所有觀察者[[NSNotificationCenter defaultCenter] removeObserver:self]; } @end

總結

以上是生活随笔為你收集整理的flutter ios打包_Flutter通过BasicMessageChannel与Android iOS 的双向通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。