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

前言

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

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

本文讲解 Android原生和Flutter混合开发情况下,在使用 Gradle 高版本低版本 时可能出现的问题;

剧透一下,无法使用 一些Gradle高版本,因为目前Flutter对高版本的Gradle并不是百分百同步

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

1、Gradle高版本

基础配置版本:

1、Flutter版本 :3.13.2

2、Gradle版本:gradle-8.0-bin.zip

3、Android Studio 版本:2022.3.1

4、Android Studio Gradle 插件版本:8.1.1

5、原生项目由 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分钟,再继续观看本文档。

1.2 修改settings.gradle

将根目录下的 settings.gradle 里的代码,修改为低版本的方式

js 复制代码
// 高版本 方式(默认生成的)
//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

将根目录下的 build.gradle 里的代码,修改为低版本的方式

js 复制代码
// 高版本 方式(默认生成的)
// 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;

js 复制代码
dependencies {

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

1.5 会出现的异常

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

异常一

PluginApplicationException

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

异常二

依赖下载失败

异常三

原生项目中的Gradle 和 Flutter中android的Gradle,发生版本冲突,高版本测试到这步被终结了。

当我解决了前两个异常,以为可以顺利运行时,结果卡在这,目前找到的解决方案,都是降低Gradle版本

2、Gradle低版本

基础配置版本:

1、Flutter版本 :3.13.2

2、Gradle版本:gradle-6.7.1-bin.zip

3、Android Studio 版本:2021.4.2.2

4、Android Studio Gradle 插件版本:4.2.2

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

1.1 运行检查原生项目

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

1.1.1 解决异常

1.1.2 警告

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

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

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

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

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

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

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

1.3 自动生成关联代码

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

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

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

MainActivity 改为 FlutterActivity

1.5 源码地址

GitHub - LanSeLianMa/AndroidAddFlutter: Android原生项目引入Flutter模块的简单案例

总结

目前 Android原生混合Flutter 最佳开发方案:

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

如果是已有Android原生项目引入Flutter,注意一下原生项目的Gradle版本,如果不能降低,那就尝试使用高版本的Flutter,因为Flutter版本越高,它内嵌android的Gradle版本就越高;

不同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...

相关推荐
AiFlutter1 小时前
Flutter-底部分享弹窗(showModalBottomSheet)
java·前端·flutter
m0_748247801 天前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
迷雾漫步者1 天前
Flutter组件————PageView
flutter·跨平台·dart
迷雾漫步者1 天前
Flutter组件————FloatingActionButton
前端·flutter·dart
coder_pig2 天前
📝小记:Ubuntu 部署 Jenkins 打包 Flutter APK
flutter·ubuntu·jenkins
捡芝麻丢西瓜2 天前
flutter自学笔记5- dart 编码规范
flutter·dart
恋猫de小郭2 天前
什么?Flutter 可能会被 SwiftUI/ArkUI 化?全新的 Flutter Roadmap
flutter·ios·swiftui
sunly_3 天前
Flutter:导航,tab切换,顶部固定,列表分页滚动
开发语言·javascript·flutter
敲代码的小强3 天前
Flutter项目兼容鸿蒙Next系统
flutter·华为·harmonyos
Zh-jie3 天前
flutter 快速实现侧边栏
前端·javascript·flutter