这篇文章旨在学习如何在现有的Android原生项目上集成Flutter，实现Android与Flutter的混编，文章主体内容分为5部分，如下：

• Android项目如何集成FlutterModule

• Flutter视图是如何展示到前台界面的

• Flutter与Weex对比

• 如何进行原生页面跳转到Flutter页面

• 原生如何与Flutter进行传值通信（以EventChannel为例说明）

接下来我会按照上面列出来的5点，逐一的进行实例讲解说明

1.Android项目如何集成FlutterModule

Android原生项目集成Flutter有两种方式，一种是在原生项目内集成FlutterModule，还有一种是将FLutter项目打包成arr文件，然后以组件的形式被原生项目依赖。这里我们就只说一下在原生项目内集成FlutterModule。

第一步：在主工程下创建FlutterModule，File->New->New Flutter Project，然后选择Flutter Module点击Next。

设置完成之后点击Finish，创建完module后我们来看一下工程的目录结构

第二步：在app下的build.gradle添加依赖

第三步：在根目录下的settings.gradle添加配置

最后同步一下，将相关的依赖下载下来，至此就成功集成了FlutterModule了。

2.Flutter视图是如何展示到前台界面的

其实Flutter视图是以View的形式添加到原生页面中的，这个和weex很像，简单的来说就是我们首先要通过某一个方法来创建一个Flutter的视图，然后在原生的Activity中创建一个容器，这个容器的作用就是来装载我们Flutter的视图，最后我们将Flutter的View添加到容器里面就可以了。接下来我们看一下实现的代码。

xml：

特别说一下创建Flutter视图这一块Flutter.createView(this, getLifecycle(), "route1");，createView中传了3个参数，前两个就不说了，重点说一下最后一个参数，最后一个参数大家可以理解为原生跳转到第一个Flutter页面的路由，可能有的人还是不理解是什么意思，我举一个例子来说明一下就会理解了。

通常我们的Flutter页面肯定不止一个，也许有很多情况下，原生要跳转到不同的Flutter页面，但是我们Flutter的入口只有这一个，那么我们要如何跳转到指定的Flutter页面呢？这时候createView的最后一个参数就发挥作用，因为我们在Flutter工程的main入口，可以获取到这个参数，进而我们就可以根据这个参数来跳转到不同的Flutter页面了。看一下Flutter的代码感受一下。

window.defaultRouteName这个方法会获取到原生中createView传递过来的第三个参数，我们可以通过一个switch语句来控制不同的路由来跳转到不同的页面。即：第三个参数为flutter_main跳转到设置页面。第三个参数为other跳转到默认页面。

3.Flutter与Weex对比

在上面第2条我们说到了原生加载Flutter视图和Weex很像，那么weex又是怎样的呢？

在weex中，也是需要我们来创建一个原生的容器用来装载weex的view视图，如我们新建一个WeexActivity实现IWXRenderListener，重写onViewCreated，在onViewCreated中系统会返回给我们一个创建好的weex的view，我们需要做的只需要将这个view添加到原生的容器中即可。

总的来说很像是因为Flutter和Weex对于Android或者iOS来说都是透明的，平台只会认为整个Flutter展示的内容是一个view，所以，Flutter视图都是以view的形式来添加到我们的原生项目中。

4.如何进行原生页面跳转到Flutter页面

这块就很简单了，前面我们已经说了，Flutter页面是以view的形式添加到我们的原生项目中的，那么我想要跳转到Flutter页面就只需要跳转到这个容器就好了

xml：

5.原生如何与Flutter进行传值通信（以EventChannel为例说明）

在上一篇博客中我们有讲过原生与Flutter通信的三种方式，这里我再说一下EventChannel通信。

EventChannel是单向的通信方式，即只能通过原生向Flutter发起通信。

（1）原生发起通信

其中onCancel代表对面不再接收，这里我们应该做一些clean up的事情。而 onListen则代表通道已经建好，Native可以发送数据了。注意onListen里带的EventSink这个参数，后续Native发送数据都是经过EventSink的。

（2）在Flutter中注册监听

（3）在Flutter中重写initState并发起通信请求

（4）监听到通信数据后进行成功或失败的处理

总结：以上就是Android与Flutter混编的全部内容了，整体就分为4部分，1.创建FlutterModule，2.创建Flutter视图容器，3.原生跳转到Flutter页面，4.原生与FLutter进行通信。以arr组件的形式集成到项目中我还没有尝试过，还在学习的过程中，如果有写的不对的地方欢迎大佬们留言指证。

作者：移动研发部--王广瀚