本文章分为两部分,第一部分是flutter向原生端传参,第二部分是原生向Flutter传参。
flutter向原生传参我们将调用原生的Toast来显示所传的参数。原生向Flutter传参我们将原生所传参数显示在Flutter页面中。
一、Flutter向原生端传参
首先我们先看Flutter端的代码:
InkWell(
child: Text('show native data'),
onTap:()=>sendData('this is flutter send to show native'),
)
这里的sendData里面的参数就是向原生端传递的。
在看看sendData里面的实现:
void sendData(String result) {
FlutterPlugins.senData(result);
}
class FlutterPlugins{
static const MethodChannel channel = const MethodChannel("hyflapp");
static Future<void> senData(String result) async{
await channel.invokeMethod('sendData',result);
}
}
MethodChannel里面的参数是需要和原生端保持一致的,可以使用包名或者约定一个。
此时Flutter端的代码已经实现完成了,我们在看看原生端的:
打开Flutter项目中的android项目,在MainActivity中添加,
val CHANNEL:String = "hyflapp"
lateinit var methodChannel:MethodChannel
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
methodChannel =
MethodChannel(flutterEngine.dartExecutor.binaryMessenger,CHANNEL)
GeneratedPluginRegistrant.registerWith(flutterEngine)
methodChannel.setMethodCallHandler { call, result ->
if (call.method.equals("sendData")) {
Toast.makeText(context, call.arguments.toString(), Toast.LENGTH_SHORT).show()
}
}
}
这里的CHANNEL值需要与Flutter中保持一致。MainActivity需要继承FlutterActivity,否则没有configureFlutterEngine方法。
此时运行代码点击对应的Text控件,将会在屏幕弹出Toast。
如果你的Flutter项目是一个flutter module依赖到一个Android原生项目的,此时我们需要新建一个FlutterPlugins,代码如下:
class FlutterPluginsChannel(activity: Activity) : FlutterPlugin,MethodChannel.MethodCallHandler {
lateinit var channel:MethodChannel
private val context:Context = activity
fun registerWith(flutterEngine: FlutterEngine){
flutterEngine.plugins.add(this)
}
override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
channel = MethodChannel(binding.binaryMessenger,context.packageName)
channel.setMethodCallHandler(this)
}
override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
channel.setMethodCallHandler(null)
}
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
if(call.method.equals("sendData")){
Toast.makeText(context,call.arguments.toString(),Toast.LENGTH_SHORT).show()
}
}
}
然后我们在承载Flutter内容的页面中添加:
flutterEngine = FlutterEngine(this)
flutterEngine.dartExecutor.executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
)
FlutterPluginsChannel(this).registerWith(flutterEngine)
二、原生向Fluterr传输数据
同上面的例子我们在原生的plugins的onMethodCall中添加:
if (call.method == "sendToFlutter) {
result.success("this data is send to flutter")
}
然后我们打开Flutter项目中的FlutterPlugins文件:
static Future<String?> get sendToFlutter async {
final String? datas = await _channel.invokeMethod('sendToFlutter');
return datas;
}
然后在显示页面添加:
String _datas = 'Unknown';
Future<void> initPlatformState() async {
String datas;
try {
datas =
await FlutterPlugins.datas ?? 'Unknown';
} on PlatformException {
datas = 'Failed to get platform version.';
}
if (!mounted) return;
setState(() {
_datas = datas;
});
}