Android原生嵌入Flutter模块

白玉梁

已于 2022-04-09 15:17:34 修改

阅读量4.2k

点赞数 3

分类专栏： Flutter 文章标签： flutter android android studio

于 2022-02-19 11:18:07 首次发布

本文链接：https://blog.csdn.net/baiyuliang2013/article/details/123015128

版权

Flutter 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

读这篇文章的前提是，你对Flutter已经有一定了解，或者已经达到会开发Flutter的程度，并且Flutter相关环境已经配置OK！

本文所展示项目的运行环境：

FlutterSDK版本：flutter_windows_2.10.1-stable
AndroidStudio版本：Bumblebee | 2021.1
AndroidSDK版本：31
Gradle版本：7.2

第一步：在你的安卓原生项目父级目录下），执行命令：

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

此时会创建出一个包名为com.example，项目名为my_flutter的flutter项目：

注意，flutter项目跟原有项目是同级目录
在这里插入图片描述
. 开头的文件或文件夹里的内容，都尽量不要修改，！

第二步：打开原生项目的setting.gradle，在include ':app’下方添加如下代码：

setBinding(new Binding([gradle: this]))                                // new
evaluate(new File(                                                     // new
        settingsDir.parentFile,                                              // new
        'my_flutter/.android/include_flutter.groovy'                         // new
))

第三步：打开原生项目app下的build.gradle，添加如下代码：

dependencies {
	//...
	implementation project(':flutter')
}

步骤很简单，但当编译时会出现各种问题，如果你遇到一下几种问题，可以找到对应解决办法：

1.如果遇到Android SDK Command-line Tools相关问题，可以在SDK管理器中安装：
在这里插入图片描述
2.如果遇到android-licenses相关问题，可以执行命令：

flutter doctor --android-licenses

提示Y/N时，一路选择Y即可！

3.如果遇到：Failed to apply plugin class ‘FlutterPlugin’：

打开setting.gradle，将repositoriesMode改为：RepositoriesMode.PREFER_PROJECT

4.如果遇到引用的第三方库解析失败：

打开setting.gradle，添加maven：

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_PROJECT)
    repositories {
        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' }
        google()
        mavenCentral()
    }
}

打开原生跟目录下的build.gradle，添加maven：

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    repositories {
        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' }
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:7.1.1'
    }
}

allprojects {
    repositories {
        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' }
        google()
        mavenCentral()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

编译通过后，项目会变成这样：
在这里插入图片描述
爆红处可以不用理会，只要运行成功即可！

小提示：

flutter clean命令，可清除生成的.android、.ios、.packages、.dart_tool文件夹；
flutter packages get命令，可重新生成以上文件；
在项目因某些原因运行出错但又找不到其他原因时，可尝试使用上述步骤解决！

打开my_flutter的lib，就可以开发flutter项目页面了！

从原生跳往Flutter页面有多种途径，首先，需要在原生项目的清单文件中声明FlutterActivity：

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

在原生页面中，通过startActivity执行跳转：

startActivity(
      FlutterActivity.createDefaultIntent(context)
    );

这是最简单最直接的跳转方式，执行后会直接通过Flutter项目的main入口进入Flutter页面，但其有一个大问题是，进入Flutter页面，就需要先加载Flutter引擎，这就导致跳转过程非常慢，会明显感觉到卡顿，这里依照官方提供的解决方案，我们可以在Application 中预先加载一个引擎缓存起来：

public class MyApplication extends Application {
  
  @Override
  public void onCreate() {
    super.onCreate();
    FlutterEngine flutterEngine = new FlutterEngine(this);
    flutterEngine.getDartExecutor().executeDartEntrypoint(
      DartEntrypoint.createDefault()
    );
    FlutterEngineCache
      .getInstance()
      .put("my_engine_id", flutterEngine);
  }
}

然后跳转时使用已缓存的引擎：

 startActivity(
      FlutterActivity
        .withCachedEngine("my_engine_id")
        .build(currentActivity)
      );

此时，跳转将会变的非常流畅，跟原生跳转无差别！

以上步骤其实已经实现了原生+flutter混合开发的初步逻辑了，但我们知道，实际情况下，我们可能会使用Flutter做多个不同的模块，那不同模块的首页必然也不相同，以上方法则默认通过flutter的main函数进入一个默认的flutter主页，无法满足需求！那该怎么办呢，别急，官方提供了通过路由跳转的方法：

startActivity(
      FlutterActivity
        .withNewEngine()
        .initialRoute("test")
        .build(currentActivity)
      );

此时我们可以在flutter的main.dart中修改main方法如下：

//通过路由启动页面
void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route) {
  switch (route) {
    case 'test1':
      return const Test1();
    case 'test2':
      return const Test2();
    case 'test3':
      return const Test3();
    default:
      return const Test1();
  }
}

Test1…是我创建的不同Flutter页面！

此时，你就可以通过initialRoute方法传入不同的路由，跳转到不同的页面！

 //使用新Flutter引擎
 binding.btnRoute.setOnClickListener(view -> {
       String[] routes = new String[]{"test1", "test2", "test3"};
       new AlertDialog.Builder(this)
               .setItems(routes, (dialogInterface, i) -> {
                   startActivity(FlutterActivity
                           .withNewEngine()
                           .initialRoute(routes[i])
                           .build(MainActivity.this));
               })
               .create()
               .show();
   });

效果如下：
在这里插入图片描述
我们发现，跳转过程明显卡顿，这是应为跳转时使用了新的引擎withNewEngine()，那我们是否可以使用已缓存的引擎，去通过路由跳转呢？可以，但不能像使用withNewEngine一样使用withCachedEngine跳转路由，因为withCachedEngine没有initialRoute方法！（关于为什么已缓存的引擎无法在设置初始路由的原因，可以参考官方文档）

Flutter给了我们解决方案，就是在创建引擎时设置初始路由：

flutterEngine = new FlutterEngine(this);
flutterEngine.getNavigationChannel().setInitialRoute("your/route/here");
flutterEngine.getDartExecutor().executeDartEntrypoint(
  DartEntrypoint.createDefault()
);
FlutterEngineCache
  .getInstance()
  .put("my_engine_id", flutterEngine);
}

然后我们就可以像上面通过window.defaultRouteName接收路由的方式一样，跳转对应的flutter页面！

当然，我们还有另外一种思路，即我可以根据Flutter的功能模块，创建多个对应的FlutterEngine，每个FlutterEngine设置不同的入口函数进入不同的Flutter界面：

FlutterEngine flutterEngine1 = new FlutterEngine(this);
String pathToBundle = FlutterInjector.instance().flutterLoader().findAppBundlePath();
flutterEngine1.getDartExecutor().executeDartEntrypoint(new DartExecutor.DartEntrypoint(pathToBundle, "test1"));
FlutterEngineCache.getInstance().put("test1_engine", flutterEngine1);

FlutterEngine flutterEngine2 = new FlutterEngine(this);
flutterEngine2.getDartExecutor().executeDartEntrypoint(new DartExecutor.DartEntrypoint(pathToBundle, "test2"));
FlutterEngineCache.getInstance().put("test2_engine", flutterEngine2);

FlutterEngine flutterEngine3 = new FlutterEngine(this);
flutterEngine3.getDartExecutor().executeDartEntrypoint(new DartExecutor.DartEntrypoint(pathToBundle, "test3"));
FlutterEngineCache.getInstance().put("test3_engine", flutterEngine3);

Flutter的main.dart中：

//通过设置不同启动入口启动页面
void test1() => runApp(const Test1());

void test2() => runApp(const Test2());

void test3() => runApp(const Test3());

通过withCachedEngine执行跳转：

//使用已缓存的Flutter引擎
binding.btn1.setOnClickListener(view -> {
    startActivity(FlutterActivity
            .withCachedEngine("test1_engine")
            .build(MainActivity.this));
});

binding.btn2.setOnClickListener(view -> {
    startActivity(FlutterActivity
            .withCachedEngine("test2_engine")
            .build(MainActivity.this));
});

binding.btn3.setOnClickListener(view -> {
    startActivity(FlutterActivity
            .withCachedEngine("test3_engine")
            .build(MainActivity.this));
});

效果如下：
在这里插入图片描述
如图，还是非常流畅的！

当然，还有其他方式如FlutterFragment，FlutterView等，具体可以参考官方文档：

https://flutter.cn/docs/development/add-to-app/android/project-setup

打包release注意事项：

在实际打包release过程中发现了若干问题：

Flutter 当前仅支持为 x86_64，armeabi-v7a 和 arm64-v8a 构建预编（AOT）的库；
如果集成的有umeng多渠道，会导致打包后安装直接闪退；
使用上面介绍的最后一种多引擎不同入口方式，会导致启动flutter界面黑屏；

第一个问题就不说了；
第二个问题目前只能删除AndroidManifest中的umeng的meta-data，同时删除build.gradle中多渠道配置的代码，然后在初始化UMConfigure时手动修改渠道名（稍显麻烦但没办法）；
第三个问题，debug模式下没问题，但release就不行，目前不清楚原因，所以可以使用在创建引擎缓存时设置初始路由；

白玉梁

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android原生嵌入Flutter模块

读这篇文章的前提是，你对Flutter已经有一定了解，或者已经达到会开发Flutter的程度，并且Flutter相关环境已经配置OK！本文所展示项目的运行环境：FlutterSDK版本：flutter_windows_2.10.1-stableAndroidStudio版本：Bumblebee | 2021.1AndroidSDK版本：31Gradle版本：7.2第一步：在你的安卓原生项目父级目录下），执行命令：flutter create -t module --org com.exampl
复制链接

扫一扫