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

一、新建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();

肉眼可见FlutterFragment启动过程相比于上一个方法流畅了不少。

以上内容便是快速实现Android项目内嵌Flutter页面的方法

若需了解更多实现细节,请参考官方文档:Add Flutter to existing app | Flutter

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值