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界面。若有疑問歡迎留言。能夠一塊兒討論。