快速实现Android项目内嵌Flutter页面（混合开发）

最新推荐文章于 2024-06-23 04:33:45 发布

PiaPiaBin

最新推荐文章于 2024-06-23 04:33:45 发布

阅读量2.1k

点赞数 4

文章标签： android flutter android studio

本文链接： https://blog.csdn.net/jiangpb003/article/details/121322844

版权

一、新建Android Project和Flutter Module

1、新建Android Project -- AndroidEmbedProject

此处省略创建过程

2、新建Flutter Module -- my_flutter_module（与Android Project位于同级目录）

创建完成后项目目录如图所示：

二、添加android项目配置

1、在AndroidEmbedProject的settings.gradle文件中添加如下配置

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'my_flutter_module/.android/include_flutter.groovy'
))
// 若AndroidEmbedProject与my_flutter_module位于不同级目录，则路径应为
// 上级目录/my_flutter_module/.android/include_flutter.groovy

Sync后，可以看到除了app module之外，还有一个flutter module

2、在app的build.gradle中添加配置

android {
    //...
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}
dependencies {
    //...
    implementation project(':flutter')
}

至此，FlutterModule已集成到Android项目中

tips：还有一种使用AAR集成FlutterModule的方法，优点在于其他Android app开发人员不需要安装Flutter SDK便可正常编译项目，但实现过程稍微复杂些，此处不做介绍，详细实现方法请参考文章底部文档链接。

三、显示Flutter界面

方式1：使用FlutterActivity

在AndroidManifest.xml中添加activity标签

<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" />

启动FlutterActivity有三种方法：

1、默认方法

startActivity(
      FlutterActivity.createDefaultIntent(currentActivity)
    );

2、使用FlutterEngine

startActivity(
        FlutterActivity
                .withNewEngine()
                .initialRoute("/")
                .build(MainActivity.this)
);

可以看到，flutter界面启动过程中会有一个短暂的白屏，这是因为使用以上两种方法每次打开ftter界面时需要一定的初始化时间

解决方法：

自定义Application并重写onCreate()方法，在方法中创建FlutterEngine并添加到缓存；启动flutter界面时只需使用缓存中的FlutterEngine（通过engineid获取），界面跳转速度便得以大幅提升。

具体方法实现如下所示

3、使用FlutterEngineCache中的FlutterEngine

（1）自定义application，创建FlutterEngine并存放在FlutterEngineCache中

public class MyApplication extends Application {

    private FlutterEngine flutterEngine;

    @Override
    public void onCreate() {
        super.onCreate();

        flutterEngine = new FlutterEngine(this);
        flutterEngine.getDartExecutor().executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
        );
        //endineid为自定义内容
        FlutterEngineCache
                .getInstance()
                .put("engine_id", flutterEngine);
    }

}

（2）通过engineid获取FlutterEngine并启动界面

startActivity(
        FlutterActivity.withCachedEngine("engine_id").build(MainActivity.this)
);

可以看到，flutter界面启动现在变得灰常流畅

方式2：使用FlutterFragment

1、默认方法

FlutterFragment flutterFragment = FlutterFragment.createDefault();
getSupportFragmentManager()
        .beginTransaction()
        .add(R.id.frameLayout, flutterFragment)
        .commit();

使用此方法启动FlutterFragment时延迟较大

2、使用FlutterEngineCache中的FlutterEngine

（1）自定义application，并初始化FlutterEngine（具体实现方式同上）

（2）启动FlutterFragment

FlutterFragment flutterFragment=FlutterFragment.withCachedEngine("engine_id").build();
getSupportFragmentManager()
        .beginTransaction()
        .add(R.id.frameLayout, flutterFragment)
        .commit();