软硬交互代码示例_flutter与android原生交互

本人flutter和react-native都有开发经验，其实不管哪种混合式开发，都必须要学会与原生的交互，这里仅仅列举下flutter与android的原生交互示例。

• 第一步：android包下MainActivity类同级目录下新建 FlutterPlugins 类(自定义哦)，需要实现 MethodChannel.MethodCallHandler

示例代码：

package com.example.meishi;

import io.flutter.app.FlutterActivity;

import io.flutter.plugin.common.MethodCall;

import io.flutter.plugin.common.MethodChannel;

public class FlutterPlugins implements MethodChannel.MethodCallHandler {

private FlutterActivity flutterActivity;

private FlutterPlugins(FlutterActivity flutterActivity) {

this.flutterActivity = flutterActivity;

}

@Override

public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {

FlutterPluginsCall.onMethodCall(flutterActivity,methodCall,result);

}

public static void registerWith(FlutterActivity activity) {

FlutterPlugins instance = new FlutterPlugins(activity);

//flutter调用原生

MethodChannel channel = new MethodChannel(activity.registrarFor(FlutterPluginsCall.channels_flutter_to_native)

.messenger(), FlutterPluginsCall.channels_flutter_to_native);

//setMethodCallHandler在此通道上接收方法调用的回调

channel.setMethodCallHandler(instance);

}

}

• 第二步：上面类同级目录下新建 FlutterPluginsCall 类 定义 通道名称、方法名称、调用原生方法的回调

示例代码：

package com.example.meishi;

import java.util.HashMap;

import io.flutter.app.FlutterActivity;

import io.flutter.plugin.common.MethodCall;

import io.flutter.plugin.common.MethodChannel;

public class FlutterPluginsCall {

/**

* 通道名称，必须与flutter注册的一致

*/

static final String channels_flutter_to_native = "com.ypp.flutter.plugins/flutter_to_native";

/**

* 方法名称，必须与flutter注册的一致

*/

private static final HashMap methodNames = new HashMap(){

{

put("getCallRecord", "getCallRecord");

}

};

/** flutter调用原生方法的回调

* @param activity activity

* @param methodCall methodCall

* @param result result

*/

static void onMethodCall(FlutterActivity activity, MethodCall methodCall, final MethodChannel.Result result){

if(methodNames.get("getCallRecord").equals(methodCall.method)){

//处理业务

System.out.println("接收到flutter传递的参数 aaa="+methodCall.argument("aaa").toString());

result.success("看到这个说明成功接收到原生返回的结果了");//处理后回调给Flutter

}

}

}

• 第三步：MainActivity 中 添加注册

示例代码：

package com.example.meishi

import android.os.Bundle

import io.flutter.app.FlutterActivity

import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

GeneratedPluginRegistrant.registerWith(this);

FlutterPlugins.registerWith(this);

}

}

以上代码需在android studio中编写，下面代码可以在webstrom中编写

• 第四步：flutter 中新建 interact_native.dart

示例代码：

import 'package:flutter/services.dart';

class InteractNative {

/* 通道名称，必须与原生注册的一致*/

static const flutter_to_native = const MethodChannel(

'com.ypp.flutter.plugins/flutter_to_native');

/*

* 方法名称，必须与flutter注册的一致

*/

static final Map methodNames = const {

'getCallRecord': 'getCallRecord',

};

/*

* 调用原生的方法(带参)

*/

static Future goNativeWithValue(String methodName,

[Map map]) async {

if (null == map) {

dynamic future = await flutter_to_native.invokeMethod(methodName);

return future;

} else {

dynamic future = await flutter_to_native.invokeMethod(methodName, map);

return future;

}

}

}

注意：通道名称、方法名称须与上述一致。

• 第五步：flutter中调用原生方法

示例代码：

import 'package:flutter/material.dart';

import 'interact_native.dart';

class CallRecordPage extends StatefulWidget {

String title;

CallRecordPage({Key key,this.title}):super(key:key);

_CallRecordPageState createState() => new _CallRecordPageState();

}

class _CallRecordPageState extends State {

Future main() {

Map map = {"aaa": '123', "bbb": '123'};

InteractNative.goNativeWithValue(InteractNative.methodNames['getCallRecord'], map)

.then((success) {

if (success == true) {

print('成功');

Navigator.pop(context);

} else if (success is String) {

//原生返回

print(success);

} else {

print('失败');

}

});

}

@override

void initState() {

main();

super.initState();

}

@override

Widget build(BuildContext context) {

// TODO: implement build

return Scaffold(

appBar: AppBar(

centerTitle: true,

title: Text(widget.title),

),

body: Container(

),

);

}

}

说明：第一行打印是 原生接收的flutter的传递参数(上述第二步)。第二行打印是 flutter接收到的原生的返回结果(上述第五步)

这个做混合式开发的小伙伴必须掌握，我后面的《flutter从放弃到入门》视频课程里面也会讲到，大家喜欢的话可以关注下。