Flutter混合开发踩坑指北

2020年这个长假因为新型冠状病毒疫情显得格外不一样，好多小伙伴应该已经闲的长毛了，再坚持一下，相信国家很快就会控制住的。
这两天实在不知道做啥了，开始跟着keep计划健身，为即将来临的工作热身，今天学习了一下Flutter的混合开发知识。
Flutter与Android的原生混合开发学习中遇到一些问题，现在记录如下。
首先看一下如何创建一个Flutter module.
在Android原生项目的同级目录使用如下命令创建一个flutter_module

flutter create -t module flutter_module

之后会有如下的输出：

➜  ~ flutter create -t module flutter_module
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Creating project flutter_module... androidx: true
  flutter_module/test/widget_test.dart (created)
  flutter_module/flutter_module.iml (created)
  flutter_module/.gitignore (created)
  flutter_module/.metadata (created)
  flutter_module/pubspec.yaml (created)
  flutter_module/README.md (created)
  flutter_module/lib/main.dart (created)
  flutter_module/flutter_module_android.iml (created)
  flutter_module/.idea/libraries/Flutter_for_Android.xml (created)
  flutter_module/.idea/libraries/Dart_SDK.xml (created)
  flutter_module/.idea/modules.xml (created)
  flutter_module/.idea/workspace.xml (created)
Running "flutter pub get" in flutter_module...                      4.9s
Wrote 12 files.

All done!
Your module code is in flutter_module/lib/main.dart.

如上就表示创建成功了。

如果用最新版的Flutter SDK，通过上述命令创建的Flutter_module默认支持的是AndroidX，这一点一定要注意。

接下来在Android原生项目中进行导入，

1. 在settings.gradle中添加如下代码：

setBinding(new Binding([gradle: this]))

evaluate(new File(
        settingsDir.parentFile,
        //flutter_module即为创建的模块名称
        'flutter_module/.android/include_flutter.groovy'
))

2.在app/build.gradle文件中dependencies节点下添加

implementation project(':flutter')

最后，通过Android Studio中的sync now 进行同步就行了，同步完成之后重新运行android原生项目即可。
问题一 原生导入flutter_module后报错AndroidX
解决方法，使原生项目支持Androidx

1. 在项目的gradle.properties文件添加如下代码，开始androidX支持

android.useAndroidX=true
android.enableJetifier=true

1. 修改MainActivity的导入文件

将import android.support.v7.app.AppCompatActivity;
修改为
import androidx.appcompat.app.AppCompatActivity;

3.修改app/build.gradle文件中dependencies

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
修改为
implementation 'androidx.appcompat:appcompat:1.0.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.2'

问题二 报错：Error:com.android.builder.dexing.DexArchiveBuilderException

通过查看flutter_module项目的app/build.gradle文件代码可以看到在Android根节点下有如下代码

compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }

所以在原生项目的app/build.gradle文件的android节点下添加如下代码，即可解决这个问题。

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

相信2020年Flutter和ReactNative在跨平台开发中齐头并进，双雄逐鹿。

欢迎大家关注我的公众号：君伟说。分享开发技术，开源信息以及职场感悟。