Flutter 集成到现有的安卓原生项目中-集成方式

Flutter 集成到现有的安卓原生项目中-集成方式

Flutter可以作为Gradle子工程或AAR文件嵌入到现有的安卓原生项目中,集成流程可以使用Android Studio的插件或手动集成,从Flutter v1.26开始,支持在原生项目中集成多个Flutter引擎、screen,view的实例。

注意:你的原生安卓项目可能支持mips或x86架构,Flutter目前(2021年9月)只支持AOT模式编译x86_64,armabi-v7a,arm64-v8a
可以在app上使用abiFilters安卓Gradle插件api限制支持的架构,避免缺少libflutter.so造成的运行时异常,比如:
android {
  //...
  defaultConfig {
    ndk {
      // Filter for architectures supported by Flutter.
      abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
    }
  }
}
Flutter引用有x86和x86——64版本,当使用模拟器JIT模式调试时,Flutter模块会正确的运行。

用Android Studio集成

Android Studio自动集成Flutter module是非常方便的,可以在项目中同时编辑android原生代码和Flutter代码,并可以继续使用Flutter插件,比如Dart代码自动补全,hot reload,widget检查等。

添加到app的流程支持Android Studio 3.6,42+的IntelliJ Flutter插件,Android Studio集成也只支持使用源码gradle子项目集成,而不支持使用AAR.

使用Android Studio菜单栏的File>New>New Module...,你可以创建一个新的Flutter module集成,或者选择一个之前创建的Flutter module

as_create_flutter_module.png

Android Studio插件会自动配置Android工程,添加Flutter module作为依赖。


手动集成

手动集成Flutter module到安卓项目,不使用Android studio插件,按照如下步骤:

创建一个Module

假设我们有一个Android app在 some/path/MyApp 路径,我们想要我们的Flutter 工程在同级目录

cd some/path/
flutter create -t module --org com.adamin flutter_m3

这样会在some/path/flutter_m3目录下创建一个Flutter module,里面有一些Dart代码作为你的初始代码,还有个.android的隐藏文件夹,.android文件夹包含一个android项目,它既可以帮助你通过flutter run命令单独运行flutter模块,也是一个包装器,可以帮助将Flutter模块引导为可嵌入的android 库。

Java 8 需求

Flutter Android 引擎使用Java 8特性。在尝试连接Flutter module到宿主安卓app之前,确保宿主Android app build.gradle文件下android {}模块下声明了源码兼容如下:

android {
  //...
  compileOptions {
    sourceCompatibility 1.8
    targetCompatibility 1.8
  }
}

添加Flutter module作为依赖

现在我们在Gradle里添加Flutter module作为宿主app的依赖,有两种发方式可以实现。AAR机制通过创建通用的Android AAR作为媒介来打包您的Flutter module,当您的下游应用程序构建者不想安装Flutter SDK时这样很好。但是如果你经常构架,它会增加一个构建步骤。

源码子项目机制是一个很方面的一键构建方式,但是依赖Flutter SDK,这种机制被Android Studio插件使用。

方式1 - 依赖Android 存档(AAR)

这种方式把你的Flutter

依赖打包成一个通用的本地Maven仓库,由AAR和POM工件组成,可以使你的团队人员不用安装Flutter SDK构建宿主app,你可以从本地或原生仓库分发工件。

构建命令如下:

cd /some/path/flutter_m3
flutter build aar

然后按照终端上输出的指令集成。

这一步可能会报错,报错信息如下:

Exception in thread "main" java.util.zip.ZipException: zip END header not found
        at java.base/java.util.zip.ZipFile$Source.zerror(ZipFile.java:1581)
        at java.base/java.util.zip.ZipFile$Source.findEND(ZipFile.java:1476)
        at java.base/java.util.zip.ZipFile$Source.initCEN(ZipFile.java:1483)
        at java.base/java.util.zip.ZipFile$Source.<init>(ZipFile.java:1288)
        at java.base/java.util.zip.ZipFile$Source.get(ZipFile.java:1251)
        at java.base/java.util.zip.ZipFile$CleanableResource.<init>(ZipFile.java:732)
        at java.base/java.util.zip.ZipFile$CleanableResource.get(ZipFile.java:849)
        at java.base/java.util.zip.ZipFile.<init>(ZipFile.java:247)
        at java.base/java.util.zip.ZipFile.<init>(ZipFile.java:177)
        at java.base/java.util.zip.ZipFile.<init>(ZipFile.java:191)
        at org.gradle.wrapper.Install.unzip(Install.java:214)
        at org.gradle.wrapper.Install.access$600(Install.java:27)
        at org.gradle.wrapper.Install$1.call(Install.java:74)
        at org.gradle.wrapper.Install$1.call(Install.java:48)
        at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65)
        at org.gradle.wrapper.Install.createDist(Install.java:48)
        at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:128)
        at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)


Gradle task assembleAarDebug failed with exit code 1.

这个时候我们需要进入在目录下输入gradlew.bat指令排查安卓构建问题,会发现是gradle文件解压失败导致的,我们删除C:\Users\用户名\.gradle\wrapper\dists\gradle-6.7-all目录下的所有文件,在执行gradlew.bat,会自动下载gradle并解压构建。终端最后两行输出下面信息就代表构建成功了。


BUILD SUCCESSFUL in 1m 25s
1 actionable task: 1 executed

接下来我们继续执行flutter build aar指令,终端上会输出下面信息:

D:\android\nettyAndroidDemo\flutter_m3\.android>flutter build aar
Changing current working directory to: D:\android\nettyAndroidDemo\flutter_m3

Building without sound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety

Running Gradle task 'assembleAarDebug'...
Running Gradle task 'assembleAarDebug'... Done                     34.3s
√ Built build\host\outputs\repo.
Running Gradle task 'assembleAarProfile'...
Running Gradle task 'assembleAarProfile'... Done                   38.3s
√ Built build\host\outputs\repo.
Running Gradle task 'assembleAarRelease'...
Running Gradle task 'assembleAarRelease'... Done                   32.5s
√ Built build\host\outputs\repo.

Consuming the Module
  1. Open <host>\app\build.gradle
  2. Ensure you have the repositories configured, otherwise add them:

      String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
      repositories {
        maven {
            url 'D:\android\nettyAndroidDemo\flutter_m3\build\host\outputs\repo'
        }
        maven {
            url "$storageUrl/download.flutter.io"
        }
      }

  3. Make the host app depend on the Flutter module:

    dependencies {
      debugImplementation 'com.adamin.flutter_m3:flutter_debug:1.0'
      profileImplementation 'com.adamin.flutter_m3:flutter_profile:1.0'
      releaseImplementation 'com.adamin.flutter_m3:flutter_release:1.0'
    }


  4. Add the `profile` build type:

    android {
      buildTypes {
        profile {
          initWith debug
        }
      }
    }

To learn more, visit https://flutter.dev/go/build-aar

接下来我们要使用aar的话,就按照上面终端输出的四步去配置gradle:

  1. 打开宿主app的build.gradle

  2. 配置本地仓库

    String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
          repositories {
            maven {
                url 'D:\android\nettyAndroidDemo\flutter_m3\build\host\outputs\repo'
            }
            maven {
                url "$storageUrl/download.flutter.io"
            }
          }
    
    1. 添加依赖

       dependencies {
            debugImplementation 'com.adamin.flutter_m3:flutter_debug:1.0'
            profileImplementation 'com.adamin.flutter_m3:flutter_profile:1.0'
            releaseImplementation 'com.adamin.flutter_m3:flutter_release:1.0'
          }
      
    2. 添加profile构建类型

       android {
            buildTypes {
              profile {
                initWith debug
              }
            }
          }
      
    方式2,依赖flutter模块源码

    在宿主安卓app的settings.gradle文件里包含flutter module:

    // Include the host app project.
    include ':app'                                    // assumed existing content
    setBinding(new Binding([gradle: this]))                                // new
    evaluate(new File(                                                     // new
      settingsDir.parentFile,    //这里如果flutter模块在宿主app目录的根目录下的话,去掉.parentFile                                         // new
      'my_flutter/.android/include_flutter.groovy'                         // new
    ))                                                                     // new
    
    

    这里的binding和evaluate允许Flutter模块在settings.gradle评估的上下文钟包含自身

(:flutter)和flutter模块依赖的插件。

在宿主app的build.gradle添加flutter模块依赖 :

dependencies {
  implementation project(':flutter')
}

这样就在安卓原生项目中手动集成了flutter。

总结

安卓原生项目集成flutter由两种方式:

  1. Android Studio菜单集成File>New>Module创建或选择Flutter module,Android Studio会自动配置和依赖模块
  2. 手动集成
    • 执行flutter create -t module --org com.adamin module_name创建模块
    • 依赖集成方式有两种,aar或源码依赖方式。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容