原生项目引入Flutter module，以及三种通讯方式示例

原生项目引入Flutter module，以及三种通讯方式示例

目录说明

• study 原生项目
• tson_flutter 引入的flutter module

首先发一个GitHub的demo代码地址，方便对比阅览。

如何在原生项目添加flutter的module？

• 创建Flutter module

默认大家已经有原生项目了，这里就是讲的新增一个flutter的module

菜单： File > New > New Flutter Project，然后如下填写你的项目信息

• 下载 Android Sdk Command Tools，如下

• 根目录 settings.gradle 修改入下，注意看注释

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_PROJECT) // 这里要修改为RepositoriesMode.PREFER_PROJECT
    repositories {
        google()
        mavenCentral()
    }
}
rootProject.name = "study"
include ':app'

// 这里是新增的 ↓↓↓↓↓↓↓↓ (如果编译器提示Binding需要导包，不要管，报错不影响构建)
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'tson_flutter/.android/include_flutter.groovy'
))
// 上面是新增的 ↑↑↑↑↑↑↑↑

// 下面这个不用管，上面的添加完，构建成功之后会自动生成
include ':tson_flutter'
project(':tson_flutter').projectDir = new File('../tson_flutter')

然后构建，构建成功之后会自动生成下面两行配置

• gradle.properties 中添加 android.enableJetifier=true

• 最后在 app 下的 build.gradle 添加依赖

注意是 ':flutter' 而不是 ':tson_flutter' (不是上面自己创建的时候取的 module 名字)

implementation project(':flutter')

然后就可以正常运
行了，构建完成之后长这样：

• 跳转Flutter页面

AndroidManifest.xml 对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(FlutterActivity.createDefaultIntent(context))

带路由跳转（我这里拓展了一个方法，方便使用）

/**
 * [route] 路由
 * [clazz] 继承于FlutterActivity的自定义Activity的class名称，不传就是打开默认的FlutterActivity
 */
fun Context?.open(route: String, clazz: Class<*>?) {
   
    this?.run {
   
        // 默认的路由传递创建Intent
        FlutterActivity.withNewEngine().initialRoute(route).build(this)
            .also {
   
                if (null != clazz) {
   
                    // 指定页面调整，如果不指定，则跳转到默认的FlutterActivity
                    it.setClass(this, clazz)
                }
                startActivity(it)
            }
    }
}


// 调用
button.setOnClickListener {
   
      open(HOME_PAGE_1)
}

原生和Flutter之间如何进行通讯？

Flutter 提供了3种通讯方式

• MethodChannel ： Flutter调用原生方法，原生可以在该方法回应消息
• BasicMessageChannel ：原生与Flutter可互相通讯，需要对通讯消息进行编码
• EventChannel ：原生调用Flutter方法

先定义一些后面用到的常量

const val METHOD_CHANNEL_1 = "methodChannel1"
const val METHOD_CHANNEL_1_FUNC = "toastTest"

const val BASIC_MESSAGE_CHANNEL_1 = "basicMessageChannel1"

const val EVENT_CHANNEL_1 = "eventChannel1"

const val FLUTTER_HOME_ID = "tson_flutter_home_id_01" // 模块1首页

private const val FLUTTER_HOME_GROUP = "FLUTTER_HOME" // 模块1路由分组
const val HOME_PAGE_1 = "${
     FLUTTER_HOME_GROUP}_home_tab_1" // 首页页面1
const val HOME_PAGE_2 = "${
     FLUTTER_HOME_GROUP}_home_tab_2" // 首页页面2
const val HOME_PAGE_3 = "${
     FLUTTER_HOME_GROUP}_home_tab_3" // 首页页面3

然后是改编的Flutter的 main.dart

void main() => runApp(TestApp(route: window.defaultRouteName));

class TestApp extends StatelessWidget {
   
  const TestApp({
   super.key, required this.route});

  final String route;

  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
        title: route,
        theme: Th