Android工程调用Flutter篇（FlutterBoost框架）

2023-03-31 11:06| 来源: 网络整理| 查看: 265

Android工程内嵌Flutter篇 - 掘金 (juejin.cn)

本篇采用FlutterBoost框架，实现原生与Flutter之间的互相调用。

一、FlutterBoost简介

（A）简介新一代Flutter-Native混合解决方案。 FlutterBoost是阿里系咸鱼技术团队开源的Flutter插件，它可以轻松地为现有原生应用程序提供Flutter混合集成方案。FlutterBoost的理念是将Flutter像Webview那样来使用。 FlutterBoost帮开发者处理页面的映射和跳转，开发者只需关心页面的名字和参数即可（通常可以是URL）

（B）为什么采用FlutterBoost

官方的集成方案有诸多弊病，eg：日志不能输出到原生端、存在内存泄漏的问题、资源冗余…… FlutterBoost 的通道的封装使得 Native 调用 Flutter 、Flutter 调用 Native 的开发更加简便 FlutterBoost 对于页面生命周期的管理，做到精准通知 FlutterBoost 为阿里出品，已在闲鱼生产环境中使用，正稳定为亿级用户提供服务 iOS和Android双端接口设计统一 Android不需要区分androidx 和support 不入侵引擎：flutter sdk升级不需要升级boost 二、FlutterBoost集成

（A）Flutter端需集成

/** * 1.添加FlutterBoost依赖到yaml文件并编译 */ dependencies: flutter: sdk: flutter flutter_boost: git: url: 'https://github.com/alibaba/flutter_boost.git' ref: '4.2.0' 复制代码 /** * 2.main.dart页面添加 */ void main() { ///这里的CustomFlutterBinding调用务必不可缺少，用于控制Boost状态的resume和pause CustomFlutterBinding(); 、、、 } ///创建一个自定义的Binding，继承和with的关系如下，里面什么都不用写 class CustomFlutterBinding extends WidgetsFlutterBinding with BoostFlutterBinding {} 复制代码

（B）Android端需集成

/** * 1.app模块的Build.gradle文件中（如果是多模块，可以在所有模块都引用的Base模块中）添加FlutterBoost模块引用 */ dependencies { 、、、 implementation project(':flutter_boost') } 复制代码 /** * 2.app模块manifest文件添加如下代码（多模块也是在这边添加） */ 、、、复制代码三、使用FlutterBoost实现原生与Flutter之间的互相调用

（A）Android调用Flutter并传值

/** * 1.Flutter端入口mian.dart中配置路由 */ class _MyAppState extends State { Map routerMap = { 'indexPage': (settings, uniqueId) { return PageRouteBuilder( settings: settings, pageBuilder: (_, __, ___) => const IndexPager()); }, 'loginPage': (settings, uniqueId) { return PageRouteBuilder( settings: settings, pageBuilder: (_, __, ___) => LoginPager()); }, 'withParamPage': (settings, uniqueId) { return PageRouteBuilder( settings: settings, pageBuilder: (_, __, ___) => WithParamPage(uniqueId, settings.arguments as Map)); }, }; 、、、 } 复制代码 /** * 2.Android端Application中添加跳转Flutter页面的方法 */ @Override public void onCreate(){ super.onCreate(); FlutterBoost.instance().setup(application, new FlutterBoostDelegate() { @Override public void pushNativeRoute(FlutterBoostRouteOptions options) { 、、、 } @Override public void pushFlutterRoute(FlutterBoostRouteOptions options) { Intent intent = new FlutterBoostActivity.CachedEngineIntentBuilder(FlutterBoostActivity.class) .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent) .destroyEngineWithActivity(false) .uniqueId(options.uniqueId()) .url(options.pageName()) .urlParams(options.arguments()) .build(FlutterBoost.instance().currentActivity()); FlutterBoost.instance().currentActivity().startActivity(intent); } }, engine -> { }); } 复制代码 /** * 3.android端点击事件跳转Flutter页面 */ findViewById(R.id.btn_to_flutter_home_pager).setOnClickListener(v -> FlutterBoost.instance().open(new FlutterBoostRouteOptions.Builder() .pageName("indexPage") .arguments(new HashMap()) .build())); findViewById(R.id.btn_to_flutter_login_pager).setOnClickListener(v -> FlutterBoost.instance().open(new FlutterBoostRouteOptions.Builder() .pageName("loginPage") .arguments(new HashMap()) .build())); findViewById(R.id.btn_to_flutter_with_param).setOnClickListener(v -> { Map params = new HashMap(); params.put("string", "我是原生传过来的数据"); params.put("bool", true); params.put("int", 666); FlutterBoost.instance().open(new FlutterBoostRouteOptions.Builder() .pageName("withParamPage") .arguments(params) .build()); }); 复制代码

（B）Flutter调用Android并传值

/** * 1.Android端Application中添加跳转原生页面的路由 */ public void onCreate() { super.onCreate(); sApplication = this; FlutterBoost.instance().setup(this, new FlutterBoostDelegate() { @Override public void pushNativeRoute(FlutterBoostRouteOptions options) { Log.i(TAG,"options.pageName="+options.pageName()); Log.i(TAG,"options.arguments="+options.arguments()); switch (options.pageName()){ case "native_main": //这里根据options.pageName来判断你想跳转哪个页面，这里简单给一个 Intent intent = new Intent(FlutterBoost.instance().currentActivity(), TestActivity.class); intent.putExtra("data", (String) options.arguments().get("data")); intent.putExtra("mobile", (String) options.arguments().get("mobile")); FlutterBoost.instance().currentActivity().startActivity(intent); break; } } @Override public void pushFlutterRoute(FlutterBoostRouteOptions options) { 、、、 } }, engine -> { }); } 复制代码 /** * 2.Flutter点击事件跳转原生页面 */ onPressed: () { BoostNavigator.instance.push("native_main", arguments: {'data': "我是flutter传过来的参数",'mobile': "15821963583"}); }, 复制代码

（C）Flutter与Flutter之间调用

//Flutter之间跳转 onPressed: () { BoostNavigator.instance.push("loginPage"); }, 复制代码 //返回上一页 onPressed: () { BoostNavigator.instance.pop(); }, 复制代码四、原生跳转Flutter会出现白屏或者黑屏

解决方案一官方给出的方案是类似启动Android工程时，添加Splash页面，如下图：

具体解决方案：

/** * Android端manifest中 */ 复制代码 /** * @drawable/flutter_launch_background */ 复制代码

此方案有两个问题 1.冷启动，温启动，热启动都会展示配置的闪屏页面。 2.只能配置静态图片

解决方案二自定义SplashScreen 在FlutterBoostActivity的父类FlutterActivity中，方法provideSplashScreen()就是用来解决原生跳Flutter白屏问题的。只要重写该方法就可解决黑白屏问题。

@Override public SplashScreen provideSplashScreen(){ return new ASplashScreen(); } class ASplashScreen implements SplashScreen{ View splashView; @Nullable @Override public View createSplashView(@NonNull Context context, @Nullable Bundle savedInstanceState)){ splashView = LayoutInflater.from(context).inflate(R.layout.view_splash, null); return splashView; } @Override public void transitionToFlutter(@NonNul Runnable onTransitionComplete){ if(splashView != null) splashView.setVisibility(View.GONE); } } 复制代码 /** * 这里加了简单的ProgressBar用来loading */ 复制代码 /** * 这里采用了Lottie动画，具体使用到github上自行查阅 * implementation 'com.airbnb.android:lottie:6.0.0' */ 复制代码五、关于包大小对比

这里使用空项目作比较 APP单独包：2.5M APP内嵌Flutter：41M 单独Flutter包：20M

【本文地址】

公司简介

联系我们