android混合编程,Flutter(Android 混合开发)

前言

Flutter 支持作为 android Moudle 出现在项目中.这样就可以在 已有的项目中 使用.

虽然现在Flutter 比较受关注,但是和weex 一样 ,大部分都只是在观望 不是真正的进行使用.所以 如果用还是混合开发 原生+Flutter 方式比较合适(自我感觉).

写一个demo 进行Android及Flutter 交互.(IOS 方法基本一致).

Flutter 调用 android 硬件的插件还比较匮乏 比如 各种传感器, 自定义相机 所以就会用到 Flutter 调用android 及android 原生调用 Flutter的方法.

本例子中会实现.

(1) 原有的android 应用程序嵌入 FlutterView

(2) Flutter 代码调用Android 原生方法进行页面跳转及传值

(3) Android原生 调用 Flutter 方法 进行传值

步骤

新建一个 android 项目

然后在 同级目录创建一个Flutter Moudle

图片.png

然后 导入 Flutter Moudle

Flutter Moudle

Moudle 导入成功后 项目结构

项目结构

app 目录下的

build.gradle 中 新增了

implementation project(':flutter')

项目目录下的

settings.gradle 增加

setBinding(new Binding([gradle: this]))

evaluate(new File(

settingsDir.parentFile,

'flutter_test_module\\.android\\include_flutter.groovy'

))

基础框架就搭建成功了

Demo 实现

实现效果

最上层放置了一个 Android原生 TextView 下方使用的FlutterView

flutterView = Flutter.createView(this, getLifecycle(), "route2");

FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);

frameLayout.addView(flutterView, layoutParams);

其中 flutterView = Flutter.createView(this, getLifecycle(), "route2"); route2 与flutter_test_module lib 文件夹下 main.dart 中 所对应 希望加载 哪个页面 就填写相应的 route 名称.

Widget _widgetForRoute(String route) {

switch (route) {

case 'route1':

return MyHomePage(title: 'Flutter Demo Home Page1');

case 'route2':

return MyHomePage(title: 'Flutter Demo Home Page2');

default:

return MyHomePage(title: 'Flutter Demo Home Page2');

}

}

Flutter 调用Android

java

new MethodChannel(flutterView, FlutterToAndroidCHANNEL).setMethodCallHandler(new MethodChannel.MethodCallHandler() {

@Override

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

//接收来自flutter的指令withoutParams

if (methodCall.method.equals("withoutParams")) {

//跳转到指定Activity

Intent intent = new Intent(NativeActivity.this, NativeActivity.class);

startActivity(intent);

//返回给flutter的参数

result.success("success");

}

//接收来自flutter的指令withParams

else if (methodCall.method.equals("withParams")) {

//解析参数

String text = methodCall.argument("flutter");

//带参数跳转到指定Activity

Intent intent = new Intent(NativeActivity.this, NativeActivity.class);

intent.putExtra("test", text);

startActivity(intent);

//返回给flutter的参数

result.success("success");

} else {

result.notImplemented();

}

}

});

dart

Future _jumpToNative() async {

String result = await toAndroidPlugin.invokeMethod('withoutParams');

print(result);

}

Future _jumpToNativeWithParams() async {

Map map = { "flutter": "这是一条来自flutter的参数" };

String result = await toAndroidPlugin.invokeMethod('withParams', map);

print(result);

}

Android 向 Flutter 传参

java

new EventChannel(flutterView, AndroidToFlutterCHANNEL)

.setStreamHandler(new EventChannel.StreamHandler() {

@Override

public void onListen(Object o, EventChannel.EventSink eventSink) {

String androidParmas = "来自android原生的参数";

eventSink.success(androidParmas);

}

@Override

public void onCancel(Object o) {

}

});

dart

void _startfromAndroiPlugin(){

if(_fromAndroiSub == null){

_fromAndroiSub = fromAndroiPlugin.receiveBroadcastStream()

.listen(_onfromAndroiEvent,onError: _onfromAndroiError);

}

}

void _onfromAndroiEvent(Object event) {

setState(() {

_nativeParams = event;

});

}

void _onfromAndroiError(Object error) {

setState(() {

_nativeParams = "error";

print(error);

});

}

有几处 要注意一一对应

new EventChannel(flutterView, AndroidToFlutterCHANNEL)

new MethodChannel(flutterView, FlutterToAndroidCHANNEL).setMethodCallHandler(new MethodChannel.MethodCallHandler() {

@Override

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

//接收来自flutter的指令withoutParams

if (methodCall.method.equals("withoutParams")) {

//跳转到指定Activity

Intent intent = new Intent(NativeActivity.this, NativeActivity.class);

startActivity(intent);

//返回给flutter的参数

result.success("success");

}

//接收来自flutter的指令withParams

else if (methodCall.method.equals("withParams")) {

//解析参数

String text = methodCall.argument("flutter");

//带参数跳转到指定Activity

Intent intent = new Intent(NativeActivity.this, NativeActivity.class);

intent.putExtra("test", text);

startActivity(intent);

//返回给flutter的参数

result.success("success");

} else {

result.notImplemented();

}

}

});

dart

Future _jumpToNative() async {

String result = await toAndroidPlugin.invokeMethod('withoutParams');

print(result);

}

Future _jumpToNativeWithParams() async {

Map map = { "flutter": "这是一条来自flutter的参数" };

String result = await toAndroidPlugin.invokeMethod('withParams', map);

print(result);

}

Android 向 Flutter 传参

java

new EventChannel(flutterView, AndroidToFlutterCHANNEL)

.setStreamHandler(new EventChannel.StreamHandler() {

@Override

public void onListen(Object o, EventChannel.EventSink eventSink) {

String androidParmas = "来自android原生的参数";

eventSink.success(androidParmas);

}

@Override

public void onCancel(Object o) {

}

});

dart

void _startfromAndroiPlugin(){

if(_fromAndroiSub == null){

_fromAndroiSub = fromAndroiPlugin.receiveBroadcastStream()

.listen(_onfromAndroiEvent,onError: _onfromAndroiError);

}

}

void _onfromAndroiEvent(Object event) {

setState(() {

_nativeParams = event;

});

}

void _onfromAndroiError(Object error) {

setState(() {

_nativeParams = "error";

print(error);

});

}

有几处 要注意一一对应

public static final String FlutterToAndroidCHANNEL = "com.litngzhe.toandroid/plugin";

public static final String AndroidToFlutterCHANNEL= "com.litngzhe.toflutter/plugin";

new EventChannel(flutterView, AndroidToFlutterCHANNEL)

new MethodChannel(flutterView, FlutterToAndroidCHANNEL)

dart中

//获取到插件与原生的交互通道

static const toAndroidPlugin = const MethodChannel('com.litngzhe.toandroid/plugin');

static const fromAndroiPlugin = const EventChannel('com.litngzhe.toflutter/plugin');

MethodChannel 中 涉及到的方法名要要统一

本文demo 传至 Github

下载地址

github 上有反馈说 demo 无法运行.两个项目 要分开打开. 先把 moudle 打开,

解决 库依赖问题 运行编译.

图片

flutter_test_module 先运行

图片

或者 在终端 输入 flutter packages get

程序不报错后

图片

目录中出现 android 及IOS环境

点击运行 .

打开 FlutterTest

点击运行.