Flutter如何实现与Android原生Widget的动态双向通信

在Flutter中，如何实现与Android原生Widget的动态双向通信？具体场景是需要在Flutter界面中嵌入一个Android原生组件（如WebView或地图），并实现两者之间的实时数据交互。能否提供具体的代码示例或方案，包括MethodChannel的使用细节以及如何处理异步回调？最好能涵盖从Flutter调用原生方法，以及原生代码主动向Flutter发送事件的完整流程。

2 回复

Flutter通过MethodChannel实现与Android原生双向通信。Flutter端调用invokeMethod发送请求，Android端通过MethodCallHandler接收并处理，再通过result回调返回数据。反之，Android也可主动调用Flutter端注册的MethodChannel方法。

更多关于Flutter如何实现与Android原生Widget的动态双向通信的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现与Android原生Widget的动态双向通信，可以通过MethodChannel和EventChannel实现。以下是具体步骤：

1. MethodChannel（双向方法调用）

用于Flutter与原生之间的方法调用和结果返回。

Flutter端代码：

import 'package:flutter/services.dart';

class NativeCommunication {
  static const MethodChannel _channel = MethodChannel('com.example/native_channel');

  // 调用原生方法
  static Future<String> callNativeMethod(String message) async {
    try {
      final String result = await _channel.invokeMethod('nativeMethod', {'msg': message});
      return result;
    } on PlatformException catch (e) {
      return "Failed: '${e.message}'";
    }
  }

  // 设置接收原生调用的方法
  static void setNativeMethodHandler() {
    _channel.setMethodCallHandler((MethodCall call) async {
      switch (call.method) {
        case 'flutterMethod':
          String data = call.arguments['data'];
          print("Received from native: $data");
          return "Flutter received: $data";
        default:
          throw MissingPluginException();
      }
    });
  }
}

Android原生端代码（Kotlin）：

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.example/native_channel"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            when (call.method) {
                "nativeMethod" -> {
                    val msg = call.argument<String>("msg")
                    // 处理逻辑
                    result.success("Native received: $msg")
                }
                else -> result.notImplemented()
            }
        }
    }

    // 主动调用Flutter方法
    fun callFlutterMethod() {
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).invokeMethod("flutterMethod", mapOf("data" to "Hello from Native"))
    }
}

2. EventChannel（单向数据流，原生到Flutter）

用于原生向Flutter持续发送事件。

Flutter端：

static const EventChannel _eventChannel = EventChannel('com.example/event_channel');
Stream<String>? _nativeStream;

Stream<String> get nativeStream {
  _nativeStream ??= _eventChannel.receiveBroadcastStream().map((event) => event.toString());
  return _nativeStream!;
}

// 在initState中监听
@override
void initState() {
  super.initState();
  NativeCommunication.nativeStream.listen((data) {
    print("Event from native: $data");
  });
}

Android端：

class MainActivity : FlutterActivity() {
    private val EVENT_CHANNEL = "com.example/event_channel"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        EventChannel(flutterEngine.dartExecutor.binaryMessenger, EVENT_CHANNEL).setStreamHandler(
            object : EventChannel.StreamHandler {
                override fun onListen(args: Any?, events: EventChannel.EventSink) {
                    // 模拟发送事件
                    Handler(Looper.getMainLooper()).postDelayed({
                        events.success("Data from Native")
                    }, 2000)
                }
                override fun onCancel(args: Any?) {}
            }
        )
    }
}

使用步骤：

  1. 在Flutter中初始化MethodChannel和EventChannel。
  2. 在Android原生代码中设置对应的MethodCallHandler和StreamHandler。
  3. 通过invokeMethod调用对方方法，通过EventSink发送事件。

注意事项：

  • 通道名称必须一致。
  • 处理异常和未实现的方法。
  • 在flutterEngine初始化后设置Handler。

这样即可实现Flutter与Android原生Widget之间的动态双向通信。

回到顶部