android 嵌入flutter 踩坑记录

看到网上不少人有介绍这部份内容，大部分都有类似之处。可是大致写的都相对概述。对于android和flutter都是新手的我来讲。写的确实有些粗糙。在这里记录一下本身使用过程当中遇到的一些问题。本文主要是讲解一些流程。

---

• 注意点 Android Studio版本至少3.2以上。

  项目使用androidx。对androidx支持库不了解的移动到深刻了解androidx

首先使用Android Studio新建一个android工程

建立项目的时候勾选下面内容，支持androidx。

而后Finish进入项目。 就会创建一个支持androidx的android项目

修改android工程配置信息

• 第一步

打开Project Structure做以下设置 设置不低于截图的版本

• 第二步

设置sdk 不低于28， 下面两个参数固定1.8

• 第三部

新建flutter模块 New-->New Flutter Project-->选择Flutter Module--> 填写生成模块名字和路径。这里我是放在了android工程的同级目录。直接next就行啦

• 第四部

引入flutter模块 New--> New Module-->Import Flutter Module-->选择上一步新建的flutter模块。

next下一步

以后须要sync project才能看到flutter工程的配置文件

修改flutter工程中的配置文件

• 打开android/gradle/wrapper/gradle-wrapper.properties，修改distributionUrl的值。

//若是版本不是4.10.2替换一下
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip
复制代码

• 打开android/build.gradle，修改com.android.tools.build:gradle 到3.3.0

//若是是3.2.1
//把它
dependencies {
    classpath 'com.android.tools.build:gradle:3.2.1'
}
//替换成
dependencies {
    classpath 'com.android.tools.build:gradle:3.3.0'
}
复制代码

• 打开android/gradle.properties，添加两行

android.enableJetifier=true
android.useAndroidX=true
复制代码

• 同时，确保你的在你的android项目目录下 app/build.gradle ,有添加以下代码：

android {
 compileSdkVersion 28
 defaultConfig {
 ...
 }
 //flutter相关声明
 compileOptions {
 sourceCompatibility 1.8
 targetCompatibility 1.8
 }
}
复制代码

• 将全部已弃用的库替换为AndroidX等效项。例如，若是您使用默认.gradle文件，请进行如下更改：

在 android/app/build.gradle和android/flutter/build.gradle

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
//替换成
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
复制代码

其次android/flutter/build.gradle，在dependencies中替换

implementation 'com.android.support:support-v13:27.1.1'
implementation 'com.android.support:support-annotations:27.1.1 //替换成 支持androidx implementation 'androidx.legacy:legacy-support-v13:1.0.0' implementation 'androidx.annotation:annotation:1.0.0' 复制代码

最后android/app/build.gradle，在dependencies中替换

implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
implementation 'com.android.support:design:27.1.1'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
//替换成 和android工程app/build.gradle中一致
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
androidTestImplementation 'androidx.test:runner:1.2.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
复制代码

更多替换映射关系看这里

最重要的是flutter工程文件的修改

修改android/Flutter/src/main/java/io/flutter/facade下面的两个文件的修改

1. Flutter.java

import android.arch.lifecycle.Lifecycle;
import android.arch.lifecycle.LifecycleObserver;
import android.arch.lifecycle.OnLifecycleEvent;
import android.support.annotation.NonNull;
//修改成
import androidx.lifecycle.Lifecycle;
import androidx.lifecycle.LifecycleObserver;
import androidx.lifecycle.OnLifecycleEvent;
import androidx.annotation.NonNull;
复制代码

2. FlutterFragment.java

import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
修改成
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
复制代码

配置已经结束，最后就如讲flutter嵌入android项目中啦

嵌入flutter有两种方FlutterView和FlutterFragment。

1. 在Android项目默认生成的MainActivity中，使用FlutterView。

View flutterView = Flutter.createView(
    MainActivity.this,
    getLifecycle(),
    "route1"
);
FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
layout.leftMargin = 100;
layout.topMargin = 400;
addContentView(flutterView, layout);
复制代码

2. 在Android项目默认生成的MainActivity中，使用FlutterFragment。

FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.fl_container, Flutter.createFragment("route1"));
fragmentTransaction.commit();
复制代码

其中fl_containerview对应Android中在res/layout中xml中定义的一个FrameLayout：

<FrameLayout
        android:id="@+id/fl_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
复制代码

而后运行工程技能看到flutter界面。若有疑问欢迎留言。能够一块儿讨论。