Android 原生混合 Flutter 开发初体验之一
前言
最近公司的项目用Flutter
技术栈比较多,有些需求可能还需要一些Android
原生的支持,所以我做了一些Android
原生混合Flutter
开发的尝试,参考了一些文章,也遇到了一些问题,这里把总结的经验分享出来。
本文是针对 Android 项目添加 Flutter 模块的情况编写的。
开发环境
- PC with Win10 20H2
- Android Studio Arctic Fox | 2020.3.1 Patch 2(试过小松鼠版本,太不喜欢了,电鳗就更没去尝试)
- AGP 7.0.2
创建一个Android
项目
直接贴图带过了哈,这步应该都熟练的吧
创建一个Flutter
模块
这里就有区别了,较新版的AS
中提供直接创建Flutter
模块的模板,但是我的北极狐版本没有,因此这里演示两种方式:
AS
模板创建
在你的当前项目中,使用AS
菜单中的 File > New > New Module… 创建一个新的Flutter
模块,或者选择一个此前就已准备好的Flutter
模块。
如果你选择创建一个新的模块,你可以使用向导来帮助你设置模块的名称,模块存放的位置之类的配置项。
- 由于我这里还是北极狐版的
AS
,所以我并未实践官方提供的模板创建方式,按照官方的说法,它会自动帮你配置好依赖关系,但我也不确定会不会遇到问题,没有最好,有的话应该也都和手动创建的方式差不多。
手动创建Flutter
模块
在Terminal
执行下方命令
flutter create -t module --org com.randalldev fluttermodule
然后官方提供了两种方式添加依赖关系:
-
AAR
依赖模式AAR
模式有个好处就是团队中的其他成员不需要安装Flutter SDK
,最少只需要一个人输出AAR
即可。但是我个人不喜欢这种方式,我更倾向于
git submodule
的项目管理方式,并且安装Flutter SDK
的成本实在算不上高,因此,这种方式,我按下不表。 -
模块代码依赖模式
这种方式确保了一步完成
Android
项目和Flutter
模块的编译。这种方式对于你的开发同时涉及两个部分并且快速迭代很方便,但这需要团队的每个人成员都安装Flutter SDK
来确保顺利编译这个混合app
。在主项目的
settings.gradle
中将Flutter
模块作为子项目引入。// Include the host app project. include ':app' // 默认已有的配置 setBinding(new Binding([gradle: this])) // 新增 evaluate(new File( // 新增 settingsDir.parentFile, // 新增 '${root_project}/fluttermodule/.android/include_flutter.groovy' // 新增 )) // 新增
此时
AS
会提示你gradle
配置变更了,需要重新sync
,别急,先别点!假设
fluttermodule
是和app
目录同层级的。在
app
的build.gradle
中添加flutter
模块的依赖dependencies { implementation project(':flutter') }
官方的指南就到此为止了,与此同时,坑也来了/doge
排雷
此时当你点了sync
会出现如下报错
* What went wrong:
A problem occurred evaluating script.
> Failed to apply plugin class 'FlutterPlugin'.
> Build was configured to prefer settings repositories over project repositories but repository 'maven' was added by plugin class 'FlutterPlugin'
将project
的setting.gradle
的
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
jcenter() // Warning: this repository is going to shut down soon
}
}
改为
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.PREFER_PROJECT)
repositories {
google()
mavenCentral()
jcenter() // Warning: this repository is going to shut down soon
}
}
此时当你点了sync
会出现如下报错
A problem occurred evaluating project ':app'.
> Project with path ':fluttermodule' could not be found in project ':app'.
在project
的setting.gradle
的末尾添加
include ':fluttermodule'
此时当你点了sync
编译大概率能成功,但是会有很严重的警告
Failed to resolve: androidx.core:core-ktx:1.9.0
Add Google Maven repository and sync project
Show in Project Structure dialog
Affected Modules: app
在project
的build.gradle
的
task clean(type: Delete) {
delete rootProject.buildDir
}
上方添加
allprojects {
repositories {
google()
mavenCentral()
maven { url 'https://jitpack.io' }
}
}
至此,大体上一个混合的Android
原生+Flutter
项目的初步构建就完成了。
页面跳转
Android
原生打开Flutter
页面
默认的跳转方式会出现明显的白屏,体验上很不好,这里直接给出优化后的方式
使用FlutterEngine
缓存并复用
-
在
app
的AndroidManifest.xml
中注册FlutterActivity
<activity android:name="io.flutter.embedding.android.FlutterActivity" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:theme="@style/Theme.HybridFlutter" android:windowSoftInputMode="adjustResize" > </activity>
-
在
app
中创建一个App.kt
继承Application
并在AndroidManifest.xml
中配置给application
节点的name
属性class App : Application() { ··· }
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.randalldev.hybridflutter"> <application android:name=".App" ··· </manifest>
-
在
App.kt
中准备好FlutterEngine
-
创建
FlutterEngine
实例private val flutterEngine by lazy { FlutterEngine(this).apply { dartExecutor.executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault()) } }
-
重写
onCreate()
并将实例存储在FlutterEngineCache
中override fun onCreate() { super.onCreate() FlutterEngineCache.getInstance().put("your_engine_id", flutterEngine) }
-
重写
onTerminate()
并将实例销毁override fun onTerminate() { super.onTerminate() flutterEngine.destroy() }
-
在业务需要的地方使用
FlutterEngine
中的Intent
实例进行跳转findViewById<TextView>(R.id.textView).setOnClickListener { startActivity(FlutterActivity.withCachedEngine("your_engine_id").build(this)) }
-
选择
app
进行run
-
- 如果遇到如下
Java
版本问题,请进行如下配置变更
A problem occurred evaluating project ':flutter'.
> Failed to apply plugin 'com.android.internal.library'.
> Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
You can try some of the following options:
- changing the IDE settings.
- changing the JAVA_HOME environment variable.
- changing `org.gradle.java.home` in `gradle.properties`.
- 选择 Project Structure > SDK location > Gradle Settings 设置
Gradle JDK
为11
- 在
./gradle.properties
中添加上文中对应的java.home
路径
# replace with your own jdk11 or above
org.gradle.java.home=C\:\\Softwares\\Google\\Android\\Android_Studio\\jre
-
sync
后应该就可以顺利的run
了
参考文章
作者:Randall_Xia
链接:https://juejin.cn/post/7187979205215748156