Flutter初探--在Android原生中引入Flutter

Flutter初探–在Android原生中引入Flutter

在最近一段时间，google新推出的跨平台开发方案Flutter得到了很多人的关注。在2019年三月，google发布Flutter1.2正式版，再次证明google推动Flutter的决心。作为一个移动开发爱好者，错过了学习RN，这次就千万不要错过Flutter。

虽然Flutter的前景很不错，但是作为一个刚出生的宝宝，它存在的问题还有很多，在github上，Flutter的issue高达四千多个。所以现在来看，全采用Flutter来开发app不知道会遇到什么坑，还好很多大公司都开始使用Flutter进行开发了，也出了许多的教材，大家没事都可以去看看。
咸鱼 https://yq.aliyun.com/teams/290/type_blog?spm=a2c4e.11153940.0.0.78fe6acfQeyVsV
美团 https://tech.meituan.com/2018/08/09/waimai-flutter-practice.html

如何在Android原生中引入Flutter

1.新建一个原生的Android项目

2.在原生工程下新建一个Flutter工程

进入到Android工程下的根目录，输入下面命令新建Flutter模块
flutter create -t module flutter_mode

3.将生成的Flutter工程绑定到Android原生中

在Android工程下的setting.gradle中加入下面代码

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

4.引入flutter

在你主模块的gradle中(app gradle)引入Flutter模块

implementation project(':flutter')

在这里需要注意的是如果的你gradle版本较低的话需要把implementation 换为compile
这个时候我们就在android工程中引入了flutter，如果一切顺利的情况下，你将能在你的工程中看到flutter modlue

我们打开flutter模块中的gradle，可以看到里面引用了support-v13的包，其中support-v13包中包含了v4与v7包中的东西，所以如果你的主app中已经引用了support的包的话且版本与这个不一致，可能会出现依赖冲突。你可以将主app中的support包去掉，以保证工程正常运行。特别注意的是，如果你想在原生中引入flutter并成功运行的话，你的support包版本最好是大于等于26

5.Flutter1.0版本与1.2版本的小区别

我在第一次引入flutter的时候，遇到了一个困扰很久的问题，在运行的时候一直出一个错误，提示我需要引入java8，可是因为公司的项目引入java8的话，需要更改很多配置，包括编译方面。一时间卡住了，后来经过研究发现，Flutter1.0版本是不需要引入java8的，而Flutter1.2版本中，加入了java8的一些东西，所以我在制作demo的时候使用的是Flutter1.0版本，但是这是治标不治本的方案，所以尽早让你的工程支持java8吧。
如果你是使用的Flutter1.2版本的话，你还需要在主app 的gradle中加入下面代码

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

6.打开Flutter工程进行组件的开发

使用Android Studio，点击File->open选择你主工程根目录下的flutter_mode文件夹，打开，即可进行Flutter开发了。你可以在这个flutter工程下进行调试，目前Flutter不支持UI的可视化。所以你需要把它推到手机上进行显示。也是十分的方便的。
如下面的图所示，main.dart是整个程序的入口。其中dart文件就与android中class文件一致。其中dart不只具有class文件的作用，还有xml布局文件的功能。

7.android工程中使用Flutter组件

当你在Flutter项目中定义好了你的组件之后，你就可以在刚刚的android项目中使用了，你可以定义一个FlutterView来引入你在flutter工程中写好的UI组件。代码如下所示，这篇文章就先讲到这里，具体Flutter开发，请关注我的其他文章。

 FlutterView flutterView0 = Flutter.createView(this,getLifecycle(),"topBar");
        FrameLayout.LayoutParams layoutParams0 = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
        topViewGroup.addView(flutterView0,layoutParams0);