在Android原生项目中 创建 Flutter模块

韩老九
2,566 阅读5分钟

前言

应用场景：在已有的Android原生项目中，引入Flutter模块，摸索了两天，终于给整出来了；

如果是新项目，最好直接创建Flutter项目，然后在Fluter的 android / ios目录中，写原生代码；

本文除了讲解 Android原生如何创建Flutter模块外，还会演示在使用 Gradle 高版本 和 低版本 时可能出现的问题；

官方指导文档：flutter.cn/docs/develo…


1、Gradle高版本

基础配置版本：

1、Flutter版本 ：3.13.2

2、Flutter内嵌android的Gradle版本：gradle-7.5-all.zip

3、Flutter内嵌android的Gradle插件版本：7.3.0

4、Android原生项目Gradle版本：gradle-8.0-bin.zip

5、Android原生项目Gradle 插件版本：8.1.1

6、Android Studio 版本：2022.3.1

7、原生项目由 Android Studio 2022.3.1 创建

1.1 在原生项目中, 创建Flutter模块

注意：Project type 要选 Module

Ps：低版本的Android Studio，New Module 里面直接可以添加 Flutter Module，而且关连的配置代码自动生成，但高版本却没有这个 Flutter Module，比如 Android Studio 2021.4.2.2 就有，我使用的高版本 Android Studio 2022.3.1 就没有，是真的坑爹！！！

至此，先将谷歌负责这块的产品经理拉出去枪毙10分钟，再继续观看本文档。

01.png

02.png

03.png

04.png

1.2 修改settings.gradle

将Android原生项目根目录下的 settings.gradle 里的代码，修改为低版本的方式；

// 高版本 方式（默认生成的）
//pluginManagement {
//    repositories {
//        google()
//        mavenCentral()
//        gradlePluginPortal()
//    }
//}
//dependencyResolutionManagement {
//    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
//    repositories {
//        google()
//        mavenCentral()
//    }
//}

// 低版本 方式
rootProject.name = "AndroidInsertFlutter"
include ':app'
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir,
        'flutter_module/.android/include_flutter.groovy'
))

1.3 修改build.gradle

将Android原生项目根目录下的 build.gradle 里的代码，修改为低版本的方式；

// 高版本 方式（默认生成的）
// Top-level build file where you can add configuration options common to all sub-projects/modules.
//plugins {
//    id 'com.android.application' version '8.1.1' apply false
//    id 'org.jetbrains.kotlin.android' version '1.9.0' apply false
//}

// 低版本 方式
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.9.0"
    repositories {
        maven { url 'https://maven.aliyun.com/nexus/content/groups/public/' }
        maven { url 'https://maven.aliyun.com/nexus/content/repositories/jcenter' }
        maven { url 'https://maven.aliyun.com/nexus/content/repositories/google' }
        maven { url 'https://maven.aliyun.com/nexus/content/repositories/gradle-plugin' }
        google()
        mavenCentral()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:8.1.1"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/nexus/content/groups/public/' }
        maven { url 'https://maven.aliyun.com/nexus/content/repositories/jcenter' }
        maven { url 'https://maven.aliyun.com/nexus/content/repositories/google' }
        maven { url 'https://maven.aliyun.com/nexus/content/repositories/gradle-plugin' }
        google()
        mavenCentral()
        jcenter() // Warning: this repository is going to shut down soon
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

1.4 导入flutter模块

project 就写 flutter，不要写成 flutter_module，做完这4步，Sync gradle；

dependencies {

    implementation project(':flutter')
    
    ... ... 
}

1.5 会出现的异常

为什么要将 settings.gradle 和 build.gradle 里的代码改为低版本方式，因为flutter内嵌android项目的gradle版本，有极大概率会低于原生项目的gradle版本，我使用的Flutter版本是 3.13.2，已经算很新了，实际开发中很少用到最新版本，目前最新的beat版本也才3.19.0，如果不修改为低版本代码方式，可能会出现以下异常：

异常一

PluginApplicationException

网上的解决方案：是将 RepositoriesMode.FAIL_ON_PROJECT_REPOS 改为 RepositoriesMode.PREFER_PROJECT，然并卵，直接引发第二个异常。

异常01.png

异常二

依赖下载失败

异常02.png

异常三

  • BundleAar可能是原生项目中的Gradle 和 Flutter内嵌android的Gradle，发生版本冲突，目前找到的解决方案，都是降低原生项目Gradle版本；
  • 这个是编译异常，直接忽略，不影响运行。

异常03.png

1.6 在原生项目中, 启动Flutter页面

将 MainActivity 改为 FlutterActivity；

01.gif

1.7 源码地址 

github.com/LanSeLianMa…


2、Gradle低版本

基础配置版本：

1、Flutter版本 ：3.13.2

2、Flutter内嵌android的Gradle版本：gradle-7.5-all.zip

3、Flutter内嵌android的Gradle插件版本：7.3.0

4、Android原生项目Gradle版本：gradle-6.7.1-bin.zip

5、Android原生项目Gradle 插件版本：4.2.2

6、Android Studio 版本：2021.4.2.2

7、原生项目由 Android Studio 2021.4.2.2 创建

1.1 运行检查原生项目

创建完原生项目后，先运行一下，因为可能一些版本差异导致出现异常；

1.1.1 解决异常

01.png

02.png

1.1.2 警告

每个Android Studio版本，都有一个最小和最大Gradle版本的限制，我尝试将Android原生的Gradle版本，改成和Flutter内嵌android的Gradle版本一致。结果它提示我升级Android Studio；

这些警告的意思是，想让我升级Gradle版本，直接忽略，不影响运行。

06.png

1.2 在原生项目中, 创建Flutter模块

03.png

在Project Location 处只需要进入Android原生项目根目录下即可，它会自动生成 flutter项目的目录，默认项目名为 flutter_module；

正确路径：xxx/xxx/Android原生项目根目录

错误路径：xxx/xxx/Android原生项目根目录/flutter_module

04.png

1.3 自动生成关联代码

这待遇怎么到了高版本Android Studio就没了呢？？？

来人，再把相关产品经理拉出去枪毙10分钟！！！

07.png

08.png

注意：创建完成后，先独立运行一下Flutter项目，检查是否正常，比如可能需要设置Flutter SDK；

05.png

1.4 在原生项目中, 启动Flutter页面

将 MainActivity 改为 FlutterActivity；

09.gif

1.5 源码地址 

github.com/youxia-mrha…


总结

  • 目前Flutter对高版本Gradle并不是百分百同步，无法保证在所有高版本Gralde中都能正常使用。

  • 所以最稳妥的Android原生混合Flutter开发方案是：

    • 如果是新项目，最好直接创建Flutter项目，然后在Fluter的 android / ios目录中，写原生代码；
    • 如果是已有Android原生项目引入Flutter，注意一下原生项目的Gradle版本，如果不能降低，那就尝试使用高版本的Flutter，因为Flutter版本越高，它内嵌android的Gradle版本就越高；

  • 最后说一句题外话，如果是Flutter项目引入已有的Android原生项目，我是直接将原生项目代码复制到Flutter内嵌的android中，如果有更好的方式欢迎留言学习。


不同Android Studio 版本下载

各版本Android Studio仓库地址：developer.android.google.cn/studio/arch…

Ps：免安装版本，就是下载下来就能用，不会覆盖你当前电脑上原有的Android Studio，这样一台电脑上，就有多个不同版本的Android Studio，可以切换使用。

Android Studio 2021.4.2.2 免安装版本 --- Window版本

redirector.gvt1.com/edgedl/andr…

Android Studio 2021.4.2.2 免安装版本 --- Mac版本

redirector.gvt1.com/edgedl/andr…

android studio 仓库.png

avatar
文章
阅读
粉丝