Flutter 与 Native 混合开发

前言

本文主要介绍 Flutter 与 Android 的混合开发，关于 Flutter 与 iOS 的混合开发后面再详细介绍。

一、Flutter 和 Android 混合开发

开发步骤：

1. 创建 Flutter module

在做混合开发之前首先需要创建一个 Flutter module。

假如你的 Android项目路径是这样的：xxx/flutter_hybrid/Android项目，那么 flutter module 就要创建在 Android项目的上一级目录下：xxx/flutter_hybrid/。

$ cd xxx/flutter_hybrid/
$ flutter create -t module flutter_module

flutter module 创建成功之后，看一下flutter_module 的文件结构，

它里面包含两个隐藏的文件 .android 与 .ios，这两个文件是 flutter_module 的宿主工程：

.android：flutter_module 的 Android 宿主工程
.ios：flutter_module 的 iOS 宿主工程
lib：flutter_module 的 Dart 部分的代码
pubspec.yaml：flutter_module 的项目依赖配置文件

因为宿主工程的存在，我们这个 flutter_module 在不加额外的配置的情况下是可以独立运行的，通过安装了 Flutter 与 Dart 插件的AndroidStudio 打开这个 flutter_module 项目，就可以直接运行。

2. 在Android项目中添加 Flutter module 依赖

首先在 Android项目根目录下的 settings.gradle 文件中添加下面的代码，构建 flutter 工程 module：

include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
  settingsDir.parentFile,
  'flutter_module/.android/include_flutter.groovy'
))

然后在 Android项目主工程app下的 build.gradle 中添加 flutter_module 的依赖：

dependencies {

    ...

    implementation project(':flutter')
}

需要注意两点：
（1）这里需要的 minSdkVersion 最小为16。
（2）Android项目编译的时候需要设置 Java8

补充：怎样设置Java8，在主工程 app下的build.gradle中添加如下代码：

android {
    
    ...

    compileOptions{
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

3. 在 Android 中调用 Flutter module

在 Android 中调用 Flutter模块有两种方式：

使用 Flutter.createView API的方式
使用 FlutterFragment 的方式

（1）使用 Flutter.createView API 的方式

MainActivity.java 代码：

findViewById(R.id.test).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                View flutterView = Flutter.createView(
                        MainActivity.this,
                        getLifecycle(),
                        "route2"
                );
                FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(600, 800);
                layoutParams.gravity = Gravity.CENTER;
                addContentView(flutterView, layoutParams);
            }
        });

（2）使用 FlutterFragment 的方式

xml布局中代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/test"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="Hello World!" />

    <FrameLayout
        android:id="@+id/someContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

MainActivity.java 代码：

findViewById(R.id.test).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
                tx.replace(R.id.someContainer, Flutter.createFragment("route1"));
                tx.commit();
            }
        });

上面代码中的“route1”用来告诉 Dart 代码在 Flutter 视图中显示哪个小部件。Flutter 模块项目的 lib/main.dart文件需要通过window.defaultRouteName 来获取 Native指定要显示的路由名，以确定要创建哪个窗口小部件并传递给runApp,
main.dart 代码

void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route){
  switch(route){
    case 'route1':
      return SomeWidget(...);
    case 'route2':
      return SomeOtherWidget(...);
    default:
      return MyApp(initParams: window.defaultRouteName,);
  }
}

“route1”也可以换成需要传递的数据。

4. 调试与发布

前面在介绍 Flutter 开发的时候，我们知道它带有热重启/重新加载的功能。但是在本文混合开发的示例中会发现，在 Android 项目中集成了 Flutter 项目，Flutter 的热重启/重新加载功能好像失效了，我们通过下面的方法来启动混合开发中的热重启/重新加载：

连接一个设备到电脑上；
关闭我们的APP，然后运行 flutter attach：

（1）调试 Dart 代码

混合开发模式下高效调试代码的方式：

关闭APP
点击 AndroidStudio 的 Flutter Attach 按钮
启动APP

（2）发布

第一步：生成 Android 签名证书
签名 APK 需要一个证书用于为 APP 签名，生成签名证书可以用 AndroidStudio 可视化的方式生成，也可以使用命令行的方式生成，这里就不在详细介绍了。

第二步：设置 gradle 变量
① 将签名证书放到 android/app 目录下。
② 编辑~/.gradle/gradle.properties 或 ../android/gradle.properties，加入一下代码：

MYAPP_RELEASE_STORE_FILE = your keystone filename
MYAPP_RELEASE_KEY_ALIAS = your keystone alias
MYAPP_RELEASE_STORE_PASSWORD = *****
MYAPP_RELEASE_KEY_PASSWORD = *****

③ 在 gradle 配置文件中添加签名配置
编辑 android/app/build.gradle 文件添加如下代码：

...
android{
    ...
    defaultConfig{...}
    signingConfigs{
        release{
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }

    buildTypes{
        release{
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

④ 签名打包APK

二、Flutter 通信机制 & Dart 端讲解

Flutter 和 Native 的通信是通过 PlatformChannel 来完成的。

消息使用 PlatformChannel 在客户端和主机之间传递。

PlatformChannel 的三种不同类型的种类：

BasicMessageChannel：用于传递字符串和半结构化的信息，持续通信，收到消息后可以回复本次消息。
MethodChannel：用于传递方法调用（method invocation）一次性通信，如 Flutter 调用 Native 拍照。
EventChannel：用于数据流（event streams）的通信，持续通信，收到消息后无法回复此次消息，通过长用于Native向Dart的通信，如：手机电量变化、网络连接变化、陀螺仪、传感器等。

这三种类型的 PlatformChannel 都是全双工通信，即A<=>B，Flutter 可以主动发送消息给 platform 端，并且 platform 接收到消息后可以做出回应。同样，platform 端可以主动发送消息给 Dart 端，Flutter 端接收消息后返回给 platform 端。

BasicMessageChannel
Flutter端：

(1) 构造方法原型

const BasicMessageChannel(this.name,this.codec);

① String name：Channel 的名字，要和 Native端保持一致；
② MessageCodec<T> codec：消息的编解码器，要和 Native端保持一致;

(2) setMessageHandler 方法原型

void setMessageHandler(Future<T> handler(T message))

① Future<T> handler(T message)：消息处理器，配合BinaryMessager 完成消息的处理；
在创建好BasicMessageChannel 后，如果要让其接收 Native 发来的消息，则需要调用它的 setMessageHandler 方法为其设置一个消息处理器。

（3）send 方法原型

Future<T> send(T message)

T message：要传递给Native的具体信息；
Future<T>：消息发出去后，收到Native回复的回调函数；
在创建好 BasicMessageChannel 后，如果要向 Native 发送消息，可以调用它的 send 方法向 Native 传递数据。

import 'package:flutter/services.dart';
...
static const BasicMessageChannel _basicMessageChannel = 
      const BasicMessageChannel('BasicMessageChannelPlugin', StringCodec());

...

//使用BasicMessageChannel接收来自Native的消息，并向Native回复
_basicMessageChannel.setMessageHandler((String message) => Future<String>((){
  setState((){
    showMessage = message;
  });
  return '收到Native的消息：'+ messgae;
}));

//使用BasicMessageChannel向Native发送消息，并接收到Native的回复
String response;
try{
  response = await _basicMessageChannel.send(value);
} on PlatformException catch (e){
  print(e);
}
...

MethodChannel
Flutter端：

（1）构造方法原型

const MethodChannel(this.name,[this.codec = const StandardMethodCodec()])

String name：Channel 的名字，要和 Native端保持一致；
MethodCodec codec：消息的编解码器，默认是 StandardMethodCodec，要和 Native端保持一致；

（2）invokeMethod 方法原型

Future<T> invokeMethod<T>(String method,[dynamic arguments])

String method：要调用 Native的方法名；
[dynamic arguments]：调用 Native方法传递的参数，可不传；

import 'package:flutter/services.dart';
...
static const MethodChannel _methodChannelPlugin = 
    const MethodChannel('MethodChannelPlugin');
...
String response;
try{
  response = await _methodChannelPlugin.invokeMethod('send',value);
}on PlatformException catch (e){
print(e);
}
...

EventChannel
Flutter端：

（1）构造方法原型

const EventChannel(this.name,[this.codec = const StandardMethodCodec()]);

String name：Channel的名字，要和 Native端保持一致；
MethodCodec codec：消息的编解码器，默认是 StandardMethodCodec，要和 Native端保持一致；

（2）receiveBroadcastStream 方法原型

Stream<dynamic> receiveBroadcastStream([dynamic arguments])

dynamic arguments：监听事件时向 Native传递的数据；
初始化一个广播流用于从 channel 中接收数据，它返回一个 Stream 接下来需要调用 Stream的 listen 方法来完成注册，另外需要在页面销毁时调用 Stream 的 cancel 方法来取消监听；

import 'package:flutter/services.dart';

...

static const EventChannel _eventChannelPlugin = 
    EventChannel('EventChannelPlugin');

StreamSubscription _streamSubscription;

@override
void initState(){
  _streamSubscription = _eventChannelPlugin
      .receiveBroadcastStream()
      .listen(_onToDart,onError: _onToDartError);
  super.initState();
}

@override
void dispose(){
  if(_streamSubscription != null){
    _streamSubscription.cancel();
    _streamSubscription = null;
  }
  super.dispose();
}

void _onToDart(message){
  setState((){
    showMessage = message;
  });
}

void _onToDartError(error){
  print(error);
}

三、Flutter 与 Android 通信

BasicMessageChannel用法
Android端：

（1）构造方法原型

BasicMessageChannel(BinaryMessenger messenger,String name,MessageCodec<T> codec)

BinaryMessenger messenger：消息信使，是消息的发送与接收的工具；
String name：Channel的名字，也是其唯一标识符；
MessageCodec<T> codec：消息的编解码器，它有几种不同类型的实现：
BinaryCodec：最为简单的一种 Codec，因为其返回值类型和入参的类型相同，均为二进制格式（Android 中为 ByteBuffer）。实际上，BinaryCodec 在编解码过程中什么都没做，只是原封不动将二进制数据消息返回而已。或许你会因此觉得 BinaryCodec 没有意义，但是在某些情况下它非常有用，比如使用 BinaryCodec 可以使传递内存数据块时在编解码阶段免于内存拷贝；
StringCodec：用于字符串与二进制数据之间的编解码，其编码格式为 UTF-8；
JSONMessageCodec：用于基础数据与二进制数据之间的编解码，其支持基础数据类型以及列表、字典。
StandardMessageCodec：是 BasicMessageChannel 的默认编解码器，其支持基础数据类型、二进制数据、列表、字典；

（2）setMessageHandler 方法原型

void setMessageHandler(BasicMessageChannel.MessageHandler<T> handler)

BasicMessageChannel.MessageHandler<T> handler：消息处理器，配合 BinaryMessenger 完成消息的处理；

在创建好 BasicMessageChannel 后，如果要让其接收 Flutter 发来的消息，则需要调用它的setMessageHandler 方法为其设置一个消息处理器。

（3）BasicMessageChannel.MessageHandler 原型

public interface MessageHandler<T>{
    void onMessage(T var1,BasicMessageChannel.Reply<T> var2);
}

onMessage(T var1,BasicMessageChannel.Reply<T> var2)：用于接收消息，var1 是消息内容，var2 是回复此消息的回调函数；

（4）send方法原型

void send(T message)
void send(T message,BasicMessageChannel.Reply<T> callback)

T message：要传递给 Flutter 的具体信息；
BasicMessageChannel.Reply<T> callback：消息发出去后，收到 Flutter 的回复的回调函数；

在创建好BasicMessageChannel后，如果要向 Flutter 发送消息，可以调用它的send方法向 Flutter 传递数据。

public class BasicMessageChannelPlugin implements BasicMessageChannel.MessageHandler<String>,
        BasicMessageChannel.Reply<String> {

    private final Activity activity;
    private final BasicMessageChannel<String> messageChannel;

    public BasicMessageChannelPlugin(FlutterView flutterView) {
        this.activity = (Activity) flutterView.getContext();
        this.messageChannel = new BasicMessageChannel<>(flutterView,
                "BasicMessageChannelPlugin", StringCodec.INSTANCE);
        //设置消息处理器，处理来自Flutter的消息
        messageChannel.setMessageHandler(this);
    }

    static BasicMessageChannelPlugin registerWith(FlutterView flutterView) {
        return new BasicMessageChannelPlugin(flutterView);
    }

    @Override
    public void onMessage(String s, BasicMessageChannel.Reply<String> reply) {//处理Flutter发来的消息
        reply.reply("BasicMessageChannelPlugin收到：" + s);//可以通过reply进行回复
        if (activity instanceof IShowMessage) {
            ((IShowMessage) activity).onShowMessage(s);
        }
        Toast.makeText(activity, s, Toast.LENGTH_SHORT).show();
    }

    /**
     * 向Flutter发送消息，并接受Flutter的反馈
     *
     * @param message
     * @param callback
     */
    void send(String message, BasicMessageChannel.Reply<String> callback) {
        messageChannel.send(message, callback);
    }

    @Override
    public void reply(String s) {

    }
}

MethodChannel用法
Android端：

（1）构造方法原型

//会构造一个StandardMethodCodec.INSTANCE类型的MethodCodec
MethodChannel(BinaryMessager messenger,String name)
//或
MethodChannel(BinaryMessager messenger,String name，MethodCodec codec)

BinaryMessenger messenger：消息信使，是消息的发送与接收的工具；
String name：Channel的名字，也是其唯一标识符；
MethodCodec codec：用作 MethodChannel 的解编码器；

（2）setMethodCallHandler 方法原型

setMethodCallHandler(@Nullable MethodChannel.MethodCallHandler handler)

@Nullable MethodChannel.MethodCallHandler handler：消息处理器，配合 BinaryMessenger 完成消息的处理；

在创建好 MethodChannel 后，需要调用它的 setMethodCallHandler方法为其设置一个消息处理器，以便能接收来自 Flutter 的消息。

（3）MethodChannel.MethodCallHandler原型

public interface MethodCallHandler{
    void onMethodCall(MethodCall var1,MethodChannel.Result var2);
}

onMethodCall(MethodCall call,MethodChannel.Result result)：用于接收消息，call 是消息内容，它有两个成员变量 String 类型的 call.method 表示调用的方法名，Object 类型的 call.arguments 表示调用方法所传递的入参；MethodChannel.Result result 是回复此消息的回调函数提供了result.success，result.error，result.notImplemented方法调用；

/**
 * MethodChannelPlugin
 * 用于传递方法调用（method invocation），一次性通信，通常用于 Flutter 调用 native 的方法：如拍照
 */
public class MethodChannelPlugin implements MethodChannel.MethodCallHandler {

    private final Activity activity;

    public MethodChannelPlugin(Activity activity) {
        this.activity = activity;
    }

    public static void registerWith(FlutterView flutterView) {
        MethodChannel channel = new MethodChannel(flutterView, "MethodChannelPlugin");
        MethodChannelPlugin instance = new MethodChannelPlugin((Activity) flutterView.getContext());
        channel.setMethodCallHandler(instance);
    }

    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        switch (methodCall.method) {//处理来自Flutter的方法调用
            case "showMessage":
                showMessage(methodCall.arguments());
                result.success("MethodChannelPlugin收到：" + methodCall.arguments);//返回结果给Flutter
                break;
            default:
                result.notImplemented();
        }
    }

    /**
     * 展示来自Flutter的数据
     *
     * @param arguments
     */
    private void showMessage(String arguments) {
        if (activity instanceof IShowMessage) {
            ((IShowMessage) activity).onShowMessage(arguments);
        }
        Toast.makeText(activity, arguments, Toast.LENGTH_SHORT).show();
    }
}

EventChannel用法
Android端：

（1）构造方法原型

//会构造一个StandardMethodCodec.INSTANCE类型的MethodCodec
EventChannel(BinaryMessenger messenger,String name)
//或
EventChannel(BinaryMessenger messenger,String name,MethodCodec codec)

BinaryMessenger messenger：消息信使，是消息的发送与接收的工具；
String name：Channel的名字，也是其唯一标识符；
MethodCodec：用作 EventChannel 的编解码器；

（2）setStreamHandler 方法原型

void setStreamHandler(EventChannel.StreamHandler handler)

EventChannel.StreamHandler handler：消息处理器，配合 BinaryMessenger 完成消息的处理；在创建好 EventChannel 后，如果要让其接收 Flutter 发来的消息，则需要调用它的 setStreamHandler 方法为其设置一个消息处理器。

（3）EventChannel.StreamHandler原型

public interface StreamHandler{
    void onListen(Object args,EventChannel.EventSink eventSink);

    void onCancel(Object 0);
}

void onListen(Object args,EventChannel.EventSink eventSink)：Flutter Native监听事件时调用，Object args 是传递的参数，EventChannel.EventSink eventSink 是 Native 回调 Flutter 时的回调函数，eventSink 提供success、error 与 endOfStream 三个回调方法分别对应事件的不同状态；
void onCancel(Object 0)：Flutter取消监听时调用；

public class EventChannelPlugin implements EventChannel.StreamHandler {
    
    private List<EventChannel.EventSink> eventSinks = new ArrayList<>();
    
    static EventChannelPlugin registerWith(FlutterView flutterView){
        EventChannelPlugin plugin = new EventChannelPlugin();
        new EventChannel(flutterView,"EventChannelPlugin").setStreamHandler(plugin);
        return plugin;
    }
    
    void sendEvent(Object params){
        for (EventChannel.EventSink eventSink : eventSinks){
            eventSink.success(params);
        }
    }
    
    @Override
    public void onListen(Object o, EventChannel.EventSink eventSink) {
        eventSinks.add(eventSink);
    }

    @Override
    public void onCancel(Object o) {

    }
}

总结

本文主要介绍了 Flutter 与 Native 的混合开发，它们之间的消息通信主要是通过 Channel 实现的。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 162,825评论 4赞 377
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 68,887评论 2赞 308
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 112,425评论 0赞 255
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,801评论 0赞 224
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 53,252评论 3赞 299
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 41,089评论 1赞 226
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 32,216评论 2赞 322
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 31,005评论 0赞 215
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,747评论 1赞 250
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,883评论 2赞 255
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,354评论 1赞 265
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,694评论 3赞 265
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,406评论 3赞 246
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,222评论 0赞 9
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,996评论 0赞 201
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 36,242评论 2赞 287
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 36,017评论 2赞 281

Flutter 与 Native 混合开发

前言

一、Flutter 和 Android 混合开发

1. 创建 Flutter module

2. 在Android项目中添加 Flutter module 依赖

3. 在 Android 中调用 Flutter module

（1）使用 Flutter.createView API 的方式

（2）使用 FlutterFragment 的方式

4. 调试与发布

（1）调试 Dart 代码

（2）发布

二、Flutter 通信机制 & Dart 端讲解

三、Flutter 与 Android 通信

总结

推荐阅读更多精彩内容