Flutter项目与Android Studio Android项目Gradle 7.3 混编与踩坑记录

311 阅读3分钟

项目目录配置

  • 首先创建一个混编项目目录
jiayuanfa@B-L1B6LVDL-2301 ~ % cd Desktop 
jiayuanfa@B-L1B6LVDL-2301 Desktop % mkdir flutter_hybrid
  • 然后在新创建的文件夹下创建一个Flutter module 项目
jiayuanfa@B-L1B6LVDL-2301 Desktop % cd flutter_hybrid 
jiayuanfa@B-L1B6LVDL-2301 flutter_hybrid % flutter create -t module flutter_module
  • 然后使用Android Studio打开fluuter_module项目,运行到一个设备上,成功运行出现+1按钮界面则表示Flutter module 模块正常

  • 接着创建一个纯Android项目,注意项目的存储位置要和flutter_module同等级

  • 创建好的目录样式如下(忽略我这边的git相关代码)

image.png

  • Android项目创建好,编译好之后,运行一下,出现Hello World界面即可。

Android 项目与 Flutter项目关联配置

  • 在Android项目下的setting.gradle下配置如下代码,注意路径名字。红色报错不用管,AS的BUG,不影响编译

image.png

setBinding(new Binding([gradle: this]))                                 // new
evaluate(new File(                                                      // new
        settingsDir.parentFile,                                                // new
        'flutter_module/.android/include_flutter.groovy'// new
))
  • 接着在app目录下的build.gradle下面添加flutter module依赖。这么写的意思是因为我们上面已经配置了目录,所以这里的配置是为了让IDE能找到我们上面配置的flutter项目并依赖它

image.png

implementation project(':flutter')
  • Flutter相关配置好了以后,注意一下app下的build.gradle的ndk、jdk、以及目标版本的配置都要符合fluuter相关版本的最小支持等级配置,我这里是这样的
plugins {
    id 'com.android.application'
}

android {
    compileSdk 32

    defaultConfig {
        applicationId "com.example.flutterhybridandroid"
        minSdk 21
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

        ndk {abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'}
    }

    buildTypes {
        profile {
            initWith debug
        }

        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {

    implementation 'androidx.appcompat:appcompat:1.5.1'
    implementation 'com.google.android.material:material:1.6.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'


    /// 引入同等级Flutter项目
    implementation project(':flutter')

}
  • 以上都配置完毕,我们可以点击一下Android Studio 的 Sync now按钮,进行资源的同步下载

报错解决

第一个报错,报错FlutterPlugin下载不下来

PluginApplicationException: Failed to apply plugin class 'FlutterPlugin'

  • 修改这一行代码 image.png

FAIL_ON_PROJECT_REPOS 改为 PREFER_PROJECT即可

第二个报错,报错flutter各种文件下载不下来。。

jiayuanfa@B-L1B6LVDL-2301 ~ % /Users/jiayuanfa/Desktop/FlutterSDK/flutter/packages/flutter_tools/gradle/flutter.gradle
  • 在该文件下面配置一下阿里云的相关maven仓库的路径即可
rootProject.allprojects {
            repositories {
                maven {
                    url repository
                }
		maven { url 'https://jitpack.io' }
 
        	maven { url 'https://maven.aliyun.com/nexus/content/groups/public/' }
 
        	maven { url 'https://maven.aliyun.com/repository/central' }
 
        	maven { url 'https://maven.aliyun.com/nexus/content/repositories/google' }
            }
        }

Android项目加载Flutter模块

package com.example.flutterhybridandroid;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.widget.TextView;

import io.flutter.embedding.android.FlutterFragment;

public class MainActivity extends AppCompatActivity {

    private TextView getFlutterTv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getFlutterTv = findViewById(R.id.getFlutter);
        getFlutterTv.setOnClickListener(view -> {
            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            ft.replace(R.id.frameLayout, FlutterFragment.createDefault());
            ft.commit();
        });
    }
}

混编项目Flutter热重载

  • 进入到flutter_module文件夹下
  • 执行命令绑定正在运行的设备
flutter attach 
  • 如果有多个设备执行
flutter attach -d '设备名称'
  • 热重载命令
r

jiayuanfa@MacBook-Pro flutter_module % flutter attach 

Waiting for a connection from Flutter on M2006J10C...

Syncing files to device M2006J10C...                                7.7s

Flutter run key commands.

r Hot reload. 🔥🔥🔥

R Hot restart.

h List all available interactive commands.

d Detach (terminate "flutter run" but leave application running).

c Clear the screen

q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

An Observatory debugger and profiler on M2006J10C is available at: http://127.0.0.1:52701/aeRyWXuWssw=/

The Flutter DevTools debugger and profiler on M2006J10C is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:52701/aeRyWXuWssw=/

Performing hot reload...                                                

Reloaded 0 libraries in 469ms (compile: 14 ms, reload: 0 ms, reassemble: 157 ms).

Performing hot reload...                                                

Reloaded 1 of 594 libraries in 774ms (compile: 54 ms, reload: 392 ms, reassemble: 220 ms).