29.Flutter与原生解耦式混合开发

目录传送门:《Flutter快速上手指南》先导篇

还记得在 混合开发(一) 章节中,讲解了如何将一个 Flutter 工程引入现有原生工程的官方方案。

但这种方案需要修改原生工程配置,在大型合作开发的项目中使用起来不是很方便,大家都需要编译自己的工程和 Flutter 工程,虽然你可能并不需要负责 Flutter 的开发。

那能不能以依赖库的形式将 Flutter 项目与原生工程完全解耦呢?

要用的时候依赖上,需要下线的时候直接去掉依赖库就好。

当你看到这个章节的时候,答案很明显啊,就是可以啊 😑。

你可以把你的 Flutter 工程打包成一个 aar 包,然后让原生工程在需要的时候依赖这个 aar,不需要的时候去掉就好。

接下来看看如何实现吧。

1. 改造你的 Flutter 工程

💡提示:把 Flutter 版本升级到最新版。本文使用的版本为 1.2.1 版本。

1.1 你需要一个 Flutter Application

如果你是从 0 开始,那么你要做的第一步就是创建一个 Flutter Application

image

这很简单,跟着提示一步步来,你也可以参考 混合开发(一)

如果你有一个 Flutter Module 工程,那么你需要在你的 Flutter Module 工程目录下的命令行中先输入:

flutter create temp

这会在你的 Flutter Module 工程下创建一个名为 tempFlutter Application 工程包。

image

你需要做的就是把 temp 中的 android 包移动到你的 Flutter Module 工程根目录,接着删除 temp 工程包。

然后把工程根目录下的 pubspec.yaml 进行小修改:

flutter:
    ...
    module:
      androidPackage: com.coorchice.flutter_module
      iosBundleIdentifier: com.coorchice.flutterModule

*********修改后*************
flutter:
    ...

就是把 module: 部分的配置删除,然后点击 Packages get 刷新一下就好。

当完成这些操作只后,你应该会在 Flutter 项目目录中看到有一个 android 工程包:

image

之所以这样做,是因为 Flutter 自动生成的 android 工程会有一些专有的配置,自己重新创建一个的话会比较麻烦。

如果你本身就有一个 Flutter Application,就啥都不用干了。

1.2 改造 android 工程包

现在,我们需要对这个 android 工程包来点儿改造 🛠。

1.2.1 修改 android 工程根目录下的 build.gradle

修改刚刚生成的 android 工程包的根目录下的 build.gradle

subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}

*********修改后*************
subprojects {
    project.buildDir = "${rootProject.buildDir}/app"
}

目的是为了让你在 Flutter 中引入的第三方插件能够被打包到最后生成的 aar 中。

否则后面运行的时候会出现找不到第三方插件类的 crash。

1.2.2 修改 app 目录下的 build.gradle

你需要在刚刚生成的 android 工程包中,找到 app 目录,然后修改该目录下的模块 build.gradle

1.修改 android 工程为 module 工程:

apply plugin: 'com.android.application'

*********修改后*************

apply plugin: 'com.android.library'

2.在 android{} 节点中增加:

compileOptions {
   sourceCompatibility 1.8
   targetCompatibility 1.8
}

3.删除 android{ defaultConfig {} } 中的 applicationId

4.在 dependencies{} 节点增加:

implementation 'com.android.support:support-v13:27.1.1'
implementation 'com.android.support:support-annotations:27.1.1'

因为 Flutter 的 sdk 中会用到这些库。

1.2.3 增加 facade 包

facade 包实际上在 Flutter Module 工程中的 .android 中会被生成。

它包含了两个封装好的 Java 代码文件,比如常用的:

FlutterView flutterView = Flutter.createView(
   activity,
   getLifecycle(),
   "route0"
);

就是在这个包中。

你可下载 facade文件.zip 解压放到 android 工程包的 app/src/main/java/io/flutter/ 下:

image

1.2.4 修改 AndroidManifest.xml

为了避免后续 aar 包引入原生工程,导致打包时的冲突,需要把 android 工程包的 AndroidManifest.xml 进行修改。

把整个 <application> 节点删除就可以了 😐。

2.把 aar 引入原生工程

2.1 打包 aar

完成上面的步骤后,就可以开始打包 aar 了。

在你的 Flutter 项目根目录的命令行中输入:

flutter build apk

等待编译完成..

生成的 aar 包在 <你的Flutter项目目录>/build/app/outputs/aar/app-release.aar

image

2.2 在原生项目中添加 aar

你可以把生成的 aar 包放到远程仓库,通过 implementation 来依赖。

也可以把 aar 包复制到 app/libs 下,然后在 app 的 build.gradle 中加入:

implementation fileTree(include: ['*.aar'], dir: 'libs')

接着刷新一下工程就可以了。

🖼 看个运行起来的效果:

image

恭喜你!你现在已经把 Flutter 工程解耦成一个 aar 包了,你可以在你的原生项目中随时添加和移除了 🎉。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353