Android 混合Flutter之产物集成方式

待我称王封你为后i 2022-12-25 10:52 221阅读 0赞

## 一、前言 ##

上一篇文章[Android 混合Flutter之源码集成方式][Android _Flutter]有优点和也有缺点：

**优点**

*  1.简单快捷，Google原生支持
 *  2.开发调试方便，和原生交互较多或需要依赖原生数据环境的时候特别能体现出来

**缺点**

*  1.团队所有人都可能要会`Flutter`并且都要安装`Flutter`环境
 *  2.需要对现有的编译体系做出修改，也就是要同时编译`Flutter`项目和`Native`项目
 *  3.`Flutter`会直接侵入到`Native`项目中去
 *  4.编译速度慢

`Android`混合`Flutter`除了上面所说的源码集成方式还有没有其他方式呢？答案肯定是有的，那就是`Flutter`以产物的方式集成到`Native`，简而言之将开发的`Flutter`项目单独编译成aar文件，然后以组件的形式被主工程(Native工程)依赖，`aar`文件可以以maven方式(远程方式)的依赖，本文主要为了体验产物集成和源码集成方案对比，就先用本地依赖的方式来集成。

## 二、Flutter项目 ##

### 1.编写Flutter项目代码 ###

这里和源码集成不同的是在`New Flutter Project`选择的是`Flutter Application`而不是`Flutter Module`：

![创建Flutter项目][Flutter]

项目结构具体如下：

![项目结构][1c270e037cdd6599eab7e2d59f49007f.png]

把上一篇源码集成`Flutter`项目的`dart`文件拉到这个项目中，代码就不贴出来了，主要是根据路由去跳转不同的页面。

### 2.build.gradle ###

首先看`android`目录下`build.gradle`:

![build.gradle][]

如果做过安卓领域的同学对这个文件很熟悉了，在原生安卓项目`app`模块下也有这个文件，这个文件是`app`模块的`gradle`构建脚本，一般用来管理app包名、版本号以及添加修改依赖库，在`Flutter`项目中，这个文件是由**Flutter SDK**生成的，相比原生安卓工程有些许不同，当然如果你根据`gradle`的知识体系来理解就行，下面看看这个文件：

//取得`local.properties`中的关于Flutter相关属性
    def localProperties = new Properties()
    def localPropertiesFile = rootProject.file('local.properties')
    if (localPropertiesFile.exists()) {
        localPropertiesFile.withReader('UTF-8') { reader ->
            localProperties.load(reader)
        }
    }
    //获取flutter.sdk信息
    def flutterRoot = localProperties.getProperty('flutter.sdk')
    if (flutterRoot == null) {
        throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
    }
    
    //获取flutter.versionCode
    def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
    if (flutterVersionCode == null) {
        flutterVersionCode = '1'
    }
    
    //获取flutter.versionName
    def flutterVersionName = localProperties.getProperty('flutter.versionName')
    if (flutterVersionName == null) {
        flutterVersionName = '1.0'
    }
    
    //指定为应用程序模块
    apply plugin: 'com.android.application'
    //引用flutter.gradle
    apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
    
    android {
        //编译版本
        compileSdkVersion 28
        //lint配置
        lintOptions {
            disable 'InvalidPackage'
        }
        
        //基本配置信息 包名，最低支持版本号 版本号 版本名字等
        defaultConfig {
            // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
            applicationId "com.example.flutter_app"
            minSdkVersion 16
            targetSdkVersion 28
            versionCode flutterVersionCode.toInteger()
            versionName flutterVersionName
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        }
    
        buildTypes {
            release {
                // TODO: Add your own signing config for the release build.
                // Signing with the debug keys for now, so `flutter run --release` works.
                //可以增加签名信息
                signingConfig signingConfigs.debug
            }
        }
    }
    flutter {
        source '../..'
    }
    dependencies {
        testImplementation 'junit:junit:4.12'
        androidTestImplementation 'com.android.support.test:runner:1.0.2'
        androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    }
    复制代码

`apply from:"$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"`这句话是引入`flutter.gradle`配置模块，可以这么理解向普通Android工程打包流程插入一些`Flutter Task`任务，简单的话用一下一张图描述：

![gradle执行顺序][gradle]

[flutter.gradle源码][flutter.gradle] 大体结构如下：

buildscript {
        repositories {
            google()
            jcenter()
        }
        dependencies {
            classpath 'com.android.tools.build:gradle:3.2.1'
        }
    }
    
    android {
        compileOptions {
            sourceCompatibility 1.8
            targetCompatibility 1.8
        }
    }
    
    apply plugin:FlutterPlugin
    class FlutterPlugin implements Plugin<Project>{...}
    class FlutterExtension {...}
    abstract FlutterTask extends BaseFlutterTask{...}
    gradle.useLogger(new FlutterEventLogger)
    class FlutterEventLogger extends BuildAdapter implements TaskExecutinListener{...}
    复制代码

`flutter.gradle`配置了一个名为`FlutterPlugin`的插件，这个插件实现了`Plugin<Project>`接口的`apply`方法,这是标准的`gradle plugin`，那么它肯定会定义一些`task`和必要的依赖，在`addFlutterTask`这个方法可以体现：

.....
               // We know that the flutter app is a subproject in another Android
               // app when these tasks exist.
               //我们知道flutter应用程序是另一个安卓系统的子项目
                Task packageAssets = project.tasks.findByPath(":flutter:package${variant.name.capitalize()}Assets")
                Task cleanPackageAssets = project.tasks.findByPath(":flutter:cleanPackage${variant.name.capitalize()}Assets")
                Task copyFlutterAssetsTask = project.tasks.create(name: "copyFlutterAssets${variant.name.capitalize()}", type: Copy) {
                    dependsOn compileTasks
                    if (packageAssets && cleanPackageAssets) {
                        //挡在flutter模块中，存在cleanPackageAssets和packageAssets时
                        dependsOn packageAssets
                        dependsOn cleanPackageAssets
                        into packageAssets.outputDir
                    } else {
                        //依赖于mergeAssets任务
                        dependsOn variant.mergeAssets
                        //依赖于cleanAssets任务
                        dependsOn "clean${variant.mergeAssets.name.capitalize()}"
                        variant.mergeAssets.mustRunAfter("clean${variant.mergeAssets.name.capitalize()}")
                        into variant.mergeAssets.outputDir
                    }
                    compileTasks.each { flutterTask ->
                        //执行flutterTask的getAssets方法
                        with flutterTask.assets
                    }
                }
                //processResource依赖于copyFlutterAssetsTask
                variant.outputs.first().processResources.dependsOn(copyFlutterAssetsTask)
    复制代码

从上面源码可以看出`processResource`这个Task依赖于`copyFlutterAssetsTask`，意思是要先执行完`copyFlutterAssetsTask`才能执行`processResource`，看英文意思就把`flutter`相关Task加到`gradle`的编译流程中，另外`copyFlutterAssetsTask`依赖了`mergeAssets`和`flutterTask`，也就是当`mergeAssets`(Android的assets处理完成后)和`flutterTask`(flutter编译完)和执行完，`Flutter`产物就会被`copyFlutterAssetsTask`根据**debug**还是**release**复制到`build/app/intermediates/merged_assets/debug/mergeDebugAssets/out`或者`build/app/intermediates/merged_assets/release/mergeReleaseAssets/out`，`Flutter`的编译产物,具体是在`flutterTask`的`getAssets`方法指定的：

class FlutterTask extends BaseFlutterTask {
        @OutputDirectory
        File getOutputDirectory() {
            return intermediateDir
        }
    
        CopySpec getAssets() {
            return project.copySpec {
                from "${intermediateDir}"
                include "flutter_assets/**" // the working dir and its files
            }
        }
        ......
    }
    复制代码

也就是说，这些产物就是`build/app/intermediates/flutter/xxx`(xxx指debug或者release)下面的`flutter_assets/`目录中的所有内容，那现在在命令行输入打包命令`flutter build apk`，会编译生成apk文件，路径位于`build/app/outputs/apk/release/app-release.apk`，注意如果你输入`flutter build apk`，实际默认打`release`包，也就是等价于`flutter build --release`，如果需要打`debug`包，可以输入`flutter build apk --debug`:

![Flutter\_build\_apk][Flutter_build_apk]

![Flutter产物分析][Flutter 1]

可以生成很多产物，这些产物都是来自`Flutter`构建代码：

final String assembly = fs.path.join(outputDir.path, 'snapshot_assembly.S');                                              
    if (buildSharedLibrary || platform == TargetPlatform.ios) {                                                               
      // Assembly AOT snapshot.                                                                                               
      outputPaths.add(assembly);                                                                                              
      genSnapshotArgs.add('--snapshot_kind=app-aot-assembly');                                                                
      genSnapshotArgs.add('--assembly=$assembly');                                                                            
    } else {                                                                                                                  
      // Blob AOT snapshot.                                                            
      final String vmSnapshotData = fs.path.join(outputDir.path, 'vm_snapshot_data');                                         
      final String isolateSnapshotData = fs.path.join(outputDir.path, 'isolate_snapshot_data');                               
      final String vmSnapshotInstructions = fs.path.join(outputDir.path, 'vm_snapshot_instr');                                
      final String isolateSnapshotInstructions = fs.path.join(outputDir.path, 'isolate_snapshot_instr');                      
      outputPaths.addAll(<String>[vmSnapshotData, isolateSnapshotData, vmSnapshotInstructions, isolateSnapshotInstructions]); 
      genSnapshotArgs.addAll(<String>[                                                                                        
        '--snapshot_kind=app-aot-blobs',                                                                                      
        '--vm_snapshot_data=$vmSnapshotData',                                                                                 
        '--isolate_snapshot_data=$isolateSnapshotData',                                                                       
        '--vm_snapshot_instructions=$vmSnapshotInstructions', 
    复制代码

看看`debug`模式下的产物：

![Flutter下debug下的产物][Flutter_debug]

可以发现lib文件下多了**x86\_64**、**x86**、**arm64-v8a**文件并对应的so文件，并且少了`isolate_snapshot_instr`和`vm_snapshot_instr`,因为在`debug`下只会执行一个命令`flutter build bundle`，它会生成`assets`、`vm_snapshot_data`、`isolate_snapshot_data`。`release`模式下，会执行两个命令：`flutter build aot`，`flutter build bundle --precomiled`，`Android`默认使用`app-aot-blobs`，这种模式会生成`isolate_snapshot_data`、`isolate_snapshot_instr`、`vm_snapshot_data`和`vm_snapshot_instr`四个文件，多生成两个文件只要是为了执行速度更快。

### 3.产物分析 ###

3.1.assets文件夹

`assets`文件夹有`isolate_snapshot_instr`，`flutter_assets`，`vm_snapshot_data`，`vm_snapshot_instr`。

*  `flutter_assets`:是`Flutter`工程产生的`assets`文件，包含字体文件，协议等。
 *  `isolate_snapshot_instr`:包含由`Dart isolate`执行的AOT代码。
 *  `isolate_snapshot_data`:表示isolates堆存储区的初始状态和特定的信息，和`vm_snapshot_data`配合，更快启动Dart\_VM。
 *  `vm_snapshot_data`:表示isolates之间共享的Dart堆存储区的初始状态，用于更快的启动Dart VM。
 *  `vm_snapshot_instr`:包含VM中所有的isolates之间的常见例程指令。

3.2.lib文件夹

lib文件夹是特定平台(arm或者x86)的so文件，`Flutter`在`Android`平台下会默认生成`arm-v7`架构的so库，**debug**模式下同时生成**x86\_64**、**x86**和**arm64-v8a**的so文件，当然有的项目可能配置了

ndk{
        abiFilters 'armeabi'
    }
    复制代码

为了解决so对其问题，需要在`Flutter`项目中手动`armeabi`的so文件，这样的话打包出来就aar包含了`armeabi`的so文件，这个`armeabi`的so文件可以拷贝`armeabi-v7`下面的，一般情况下他们两个是没什么区别，在app目录下创建libs/armeabi，然后将`libflutter.so`拷贝到armeabi的目录下，然后在gradle中配置

android{
    	sourceSets {
            main {
                jniLibs.srcDirs = ['libs']
            }
        }
    }
    复制代码

因为`Flutter SDK`版本速度很快，每个版本打出的so文件可能稍有不同，所有只要升级sdk可能就需要拷贝so文件，比较麻烦，所以可以监听打包aar的任务来进行自动拷贝，在gradle文件中配置以下代码

//以下任务为了拷贝so  因为Flutter默认只生成v7的so
    task copyFlutterSo(dependsOn: 'transformNativeLibsWithSyncJniLibsForRelease', type: Copy) {
        //${buildDir} =  /Users/xueshanshan/project/flutter/flutter_debug_library/build/app
        def dir = "${buildDir}/intermediates/library_and_local_jars_jni/release"
        from "${dir}/armeabi-v7a/libflutter.so"
        into "${dir}/armeabi/"
    }
    复制代码

本文暂时还不需要用到这两步。

### 4.打包aar文件 ###

上面通过编译命令得到apk，那么如果想打包aar，只要把`app/build.gradle`中的`apply plugin: 'com.android.application'`改为`apply plugin: 'com.android,library'` 并且把`applicationId "com.example.flutter_app"`注释

![打包aar文件一][aar]

在`android`目录下的`AndroidManifest.xml`把`android:label="xxx"`和`android:name="xxxxx"`注释掉：

![AndroidMenifest.xml文件配置][AndroidMenifest.xml]

在`Terminal`执行下面命令，就能得到`app-release.aar`文件

*  flutter clean
 *  cd android
 *  ./gradlew assembleRelease

![得到aar文件][aar 1]

## 三、Android项目 ##

首先创建完Android项目，将上面打包成功的`aar文件`以普通的`aar`集成到Android项目中去，首先将`aar`文件拷贝到`libs`目录下：

![添加aar文件][aar 2]

并且在`app`模块下配置`build.gradle`，对`aar`文件的依赖

![添加aar文件依赖][aar 3]

这时候你会发现没有`Flutter`类和`FlutterFragment`，在[Android 混合Flutter之源码集成方式][Android _Flutter]有提过，创建`Flutter Module`的时候，在`.android`\->`Flutter`\->`io.flutter`\->`facade`会生成两个`java`文件，分别是`Flutter`和`FlutterFragment`：

*  Flutter:Android应用程序中使用Flutter的主要入口点
 *  FlutterFragment:Fragment来管理FlutterView

下面把这两个文件复制过来：

![添加Flutter和FlutterFragment][Flutter_FlutterFragment]

最后`Android`原生调用`Flutter`方式：

*  继承FlutterActivity

@Override
        public FlutterView createFlutterView(Context context){
            getIntentData();
            WindowManager.LayoutParams matchParent = new WindowManager.LayoutParams(-1, -1);
            //创建FlutterNativeView
            FlutterNativeView nativeView = this.createFlutterNativeView();
            //创建FlutterView
            FlutterView flutterView = new FlutterView(FlutterMainActivity.this,(AttributeSet)null,nativeView);
            //给FlutterView传递路由参数
            flutterView.setInitialRoute(routeStr);
            //FlutterView设置布局参数
            flutterView.setLayoutParams(matchParent);
            //将FlutterView设置进ContentView中,设置内容视图
            this.setContentView(flutterView);
            return flutterView;
        }
    
    复制代码

*  继承AppCompatActivity

@Override
        protected void onCreate(@Nullable Bundle savedInstanceStae){
            super.onCreate(savedInstanceStae);
    
            String route = getIntent().getStringExtra("_route_");
            String params = getIntent().getStringExtra("_params_");
            JSONObject jsonObject = new JSONObject();
            try{
                jsonObject.put("pageParams",params);
            } catch(JSONException e){
                e.printStackTrace();
    
            }
            //将FlutterView设置进ContentView中,设置内容视图
            //创建FlutterView
            flutterView = Flutter.createView(this,getLifecycle(),route + "?" + jsonObject.toString());
            //设置显示视图
            setContentView(flutterView);
            //插件注册
            registerMethodChannel();
    
        }
    复制代码

*  Fragment方式：

@Nullable
        @Override
        public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
            Log.d(TAG,"onCreateView-mRoute:"+mRoute);
    
            mFlutterView = Flutter.createView(getActivity(),getLifecycle(),mRoute);
            //综合解决闪屏，布局覆盖问题
            mFlutterView.setZOrderOnTop(true);
            mFlutterView.setZOrderMediaOverlay(false);
            mFlutterView.getHolder().setFormat(Color.parseColor("#00000000"));
    
            //注册channel
           // GeneratedPluginRegistrant.registerWith(mFlutterView.getPluginRegistry());
            //返回FlutterView
            return mFlutterView;
        }
    复制代码

实际效果如下图：

![最终效果图][1d84e6a1167491075d8c8b2f9e129028.gif]

**注意** 这里会牵扯到如果`Flutter`工程依赖了第三方的`Flutter plugin`那么打包`aar`文件的时候是无法把`Plugin`内容打进去的，网上有文章说可以用[fataar-gradle-plugin][]或者[fat-aar-android][]，找遍`gradle`没找到修改的地方，可以采用这两篇文章[把flutter项目作为aar添加到已有的Android工程上][flutter_aar_Android]和[Flutter混编一键打包并上传maven][Flutter_maven]的方法来实现。

## 四、总结 ##

如果想要以混编的方式来开发项目，可以自行根据这两种方案的特点来选择，下面附上两种方案的优缺点：

![优缺点对比][688bd76f907d91354d7411f80ab0f42d.png]

## 五、参考资料 ##

*  [Flutter打包aar并且集成现有Android项目][Flutter_aar_Android]
 *  [flutter.gradle配置][flutter.gradle 1]
 *  原生App项目集成flutter混合开发详细指南

## 六、源码案例 ##

[本博文例子Flutter端][Flutter 2]

[本博文例子Android端][Android]

作者：真丶深红骑士  
链接：https://juejin.cn/post/6844903929868713992  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[Android _Flutter]: https://juejin.im/post/6844903924315471880
[Flutter]: /images/20221120/1e1967b27af4492db59ee2b2a2d87cb1.png
[1c270e037cdd6599eab7e2d59f49007f.png]: /images/20221120/3c7f5664ebf3407eacc3557faff14445.png
[build.gradle]: /images/20221120/95cc300974cb4bcbb178365aa5c5f532.png
[gradle]: /images/20221120/5994fb3ba60740679493ba7ad971b04a.png
[flutter.gradle]: https://github.com/flutter/flutter/blob/master/packages/flutter_tools/gradle/flutter.gradle
[Flutter_build_apk]: /images/20221120/42c9b451e0d94de99fb534f9d3f9ce74.png
[Flutter 1]: /images/20221120/3fdfb13143984187acf68065e0a25abf.png
[Flutter_debug]: /images/20221120/6b4d39a3d0144b9794ae3cb3cba8efaa.png
[aar]: /images/20221120/bec0126702704eb5b9d673b6917c2550.png
[AndroidMenifest.xml]: /images/20221120/3e987147445e4c059fcc6402550f5cfb.png
[aar 1]: /images/20221120/75690a433bb64f83b62d7b71caff8101.png
[aar 2]: /images/20221120/783aa28c424d4021b6d2bf2610b8ec28.png
[aar 3]: /images/20221120/9b10f4ac9b4f40c4a9d07e43ed7f41d1.png
[Flutter_FlutterFragment]: /images/20221120/0d355f518bc94455b2c42e1aeb95060a.png
[1d84e6a1167491075d8c8b2f9e129028.gif]: /images/20221120/ae2097e5e9d148af9cfd63070bd604e7.png
[fataar-gradle-plugin]: https://github.com/Mobbeel/fataar-gradle-plugin
[fat-aar-android]: https://github.com/kezong/fat-aar-android
[flutter_aar_Android]: https://blog.csdn.net/qq_28478281/article/details/92417053
[Flutter_maven]: https://galaxybruce.github.io/flutter/Flutter%E6%B7%B7%E7%BC%96%E4%B8%80%E9%94%AE%E6%89%93%E5%8C%85%E5%B9%B6%E4%B8%8A%E4%BC%A0maven.html
[688bd76f907d91354d7411f80ab0f42d.png]: /images/20221120/46c5869a9b3c4d0b9e381bf249368a10.png
[Flutter_aar_Android]: https://blog.csdn.net/qq_33666539/article/details/85340704
[flutter.gradle 1]: https://www.jianshu.com/p/6f0bc442c3ed
[Flutter 2]: https://github.com/KnightAndroid/Flutter_Test
[Android]: https://github.com/KnightAndroid/Android_Test