android 和flutter开发环境搭建 与 混合开发

一 首先安装flutterSdk和配置环境变量

到 https://flutter.cn/docs/get-started/install/windows下载安装文件

QQ图片20230218172801.png

安装后我解压到c:\flutter

QQ图片20230218172801.png

然后配置环境变量。

QQ图片20230218172801.png

命令行窗口运行一下命令,如下就表示正常

QQ图片20230218172801.png

二 安装android studio

参考这个文章https://blog.csdn.net/qq_45657541/article/details/121610344
注意: 不要去安装模拟器, 直接用真机开发. 模拟器又慢又不好用.还占内存和磁盘.

三 flutter doctor

配置androidSdk 位置, 这个是在上面装android studio里面又说.

QQ图片20230218172801.png

先在android studio里面 把 这个 common-line 工具安装好

QQ图片20230218172801.png

然后 在命令窗口 运行 flutter doctor
同意 Android 协议

QQ图片20230218172801.png

四 安装 Flutter 和 Dart 插件

QQ图片20230218172801.png

五 原生和Flutter 混合

5.1 创建一个Flutter module

在命令行执行如下命令,创建 flutter_module

flutter create -t module --org com.example flutter_module

QQ图片20230218172801.png

5.2 创建一个android 原生 项目 ,这个比较简单 就不截图了.

最后目录结构如下:

QQ图片20230218172801.png

检查原生Android项目里面的 app目录下面的 build.gradle里面,要有如下的内容:

image.png

然后在项目根目录下的setting.gradle文件中配置：

image.png

注意 这个地方一定要将默认的 FAIL_ON_PROJECT_REPOS 改成 PREFER_PROJECT . 否则要报错!!

repositoriesMode.set(RepositoriesMode.PREFER_PROJECT)

image.png

注意这儿有个坑

image.png

我弄好的 setting.gradle文件 如下:

pluginManagement {
    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_PROJECT)   // 这个地方注意一定要修改
    repositories {
//        google()
//        mavenCentral()
        maven { url 'https://maven.aliyun.com/repository/public' }   // new
        maven { url 'https://maven.aliyun.com/repository/public' }   // new
        maven { url 'https://maven.aliyun.com/repository/google' }    // new
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }   // new

    }
}
rootProject.name = "MyApplication"
include ':app'
include ':flutter_module'                                       // new
setBinding(new Binding([gradle: this]))                               // new
evaluate(new File(                                                     // new
        settingsDir.parentFile,                                              // new
        'flutter_module/.android/include_flutter.groovy'                         // new
))

project(':flutter_module').projectDir = new File('../flutter_module')   // new

在app的build.gradle 里面加上如下代码

implementation project(':flutter')

image.png

在project的build.gradle 里面加上如下代码

allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
    }
}

最后这样的效果:

image.png

然后开始 sync 整个项目.

image.png

正情况下 弄完 就是如下情况

image.png

切换到project视图 就可以 编辑flutter代码了.

image.png

6 从原生页面调到flutter 页面.

AndroidManifest.xml 这个文件里面 增加一个<activity 给Flutter用.

<activity
            android:name="io.flutter.embedding.android.FlutterActivity"
            android:theme="@style/Theme.AppCompat.Light"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize"
            />

image.png

代码如下:

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.embedding.engine.FlutterEngineCache;
import io.flutter.embedding.engine.dart.DartExecutor;

public class MainActivity extends AppCompatActivity {
    public FlutterEngine flutterEngine;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //-----这一块代码都是加引擎缓存用的.---------
        // Instantiate a FlutterEngine.
        flutterEngine = new FlutterEngine(this);
        // Start executing Dart code to pre-warm the FlutterEngine.
        flutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());
        // Cache the FlutterEngine to be used by FlutterActivity.
        FlutterEngineCache.getInstance().put("engine_f_m", flutterEngine);
        //-------------------------------------

        setContentView(R.layout.activity_main);

        findViewById(R.id.buttonT).setOnClickListener(v->{
//            startActivity(FlutterActivity.createDefaultIntent(this));
            startActivity(FlutterActivity.withCachedEngine("engine_f_m").build(this));
        });
    }
}