Flutter接入FlutterBoost进行跳转，并实现Flutter与Native的通信

╰半橙微兮° 2023-10-09 13:39 46阅读 0赞

#### FlutterBoost是什么 ####

FlutterBoost是阿里系闲鱼技术团队开源的 Flutter 插件。  
FlutterBoost的理念是将Flutter像Webview那样来使用。  
在现有应用程序中同时管理Native页面和Flutter页面并非易事，FlutterBoost帮你处理页面的映射和跳转，使你只需关心页面的名字和参数即可（通常可以是URL）。

#### 如何接入FlutterBoost ####

一般参考[FlutterBoost官方文档][FlutterBoost]接入即可，但是我在接入的时候，遇到了一些坑，这里我记录一下，大家可以结合着官方文档来看。

##### 新建FlutterNative并依赖到Native项目中 #####

这部分可以看我另一篇博客 [Flutter与Android Native进行混合开发][Flutter_Android Native]  
目录结构如下  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16]

##### Dart部分 #####

添加FlutterBoost依赖到yaml文件

flutter_boost:
      git:
        url: 'https://github.com/alibaba/flutter_boost.git'
        ref: 'v3.0-preview.16'

###### 注意点 : 空安全 ######

我接入的时间是2021年11月，这时候，默认新建的Flutter是支持空安全的，而FlutterBoost默认版本是不支持空安全的。  
所以解决方法有两种  
1.将flutter项目的`pubspec.yaml`中，dart的版本改为2.7.0

environment:
      #sdk: ">=2.12.0 <3.0.0"
      sdk: ">=2.7.0 <3.0.0"

2.使用支持空安全的FlutterBoost版本

flutter_boost:
    	git:
    	    url: 'https://github.com/alibaba/flutter_boost.git'
    	    ref: 'v3.0-null-safety-preview.16'

> 详见 GitHub issue : [Flutter 空安全 null-safety \#1327][Flutter _ null-safety _1327]

###### 注意点 : CupertinoPageRoute ######

`CupertinoPageRoute`这个类是IOS UI风格的，需要引入对应的包

import 'package:flutter/cupertino.dart';

当然也可以用Android 风格的`MaterialPageRoute`，对应的引包如下

import 'package:flutter/material.dart';

###### 从Flutter 跳转到 Native ######

BoostNavigator.instance.push("native_main")
    //BoostNavigator.instance.push("native_second")
    	.then((value) => print("return:${
          value?.toString()}"));

###### 跳转到下一个Flutter页面 ######

BoostNavigator.instance.push("generalSettings");

###### 回到上一个页面 ######

BoostNavigator.instance.pop();

###### 监听某个Flutter页面的生命周期 ######

参照官方文档 [生命周期API部分][API]  
需要注意的是，页面的最外层得用`StatefulWidget`，不能用`StatelessWidget`，否则会没有效果。

##### Android部分 #####

FlutterBoost.instance().setup(this, new FlutterBoostDelegate() {
        
        @Override
        public void pushNativeRoute(FlutterBoostRouteOptions options) {
        
            String pageName = options.pageName();
            Log.i("NativeApp", "pageName:" + pageName);
            //这里根据options.pageName来判断你想跳转哪个页面
            Intent intent = null;
            if ("native_main".equals(pageName)){
        
                intent = new Intent(FlutterBoost.instance().currentActivity(), MainActivity.class);
            }else if("native_second".equals(pageName)){
        
                intent = new Intent(FlutterBoost.instance().currentActivity(), SecondActivity.class);
            }
            FlutterBoost.instance().currentActivity().startActivityForResult(intent, options.requestCode());
        }
    
        @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 -> {
        
        //Channel在这里进行实例化
        new BatteryChannel(engine.getDartExecutor(), this);
    });

`FlutterBoost.instance().setup`中，有以下几个需要实现的方法

*  `pushNativeRoute`是从Flutter跳转到Native的时候，执行的方法，这里我们可以通过`options.pageName()`取到pageName，然后跳转到对应的Native页面。
 *  `engine ->{}` 中，我们可以实例化Channel，从而实现Flutter和Native之间的通信

###### 从Android Native跳转到Flutter ######

Map<String, Object> params = new HashMap<>();
           params.put("string", "a string");
           params.put("bool", true);
           params.put("int", 666);
    
    Intent intent = new FlutterBoostActivity.CachedEngineIntentBuilder(FlutterBoostActivity.class)
             .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.opaque)
             .destroyEngineWithActivity(false)
             .url("flutterPage") //在main.dart的routerMap中有注册 对应的这个url
             .urlParams(params)
             .build(this);
             startActivity(intent);

#### 实现Flutter与Native的通讯 ####

主要就是Channel的实例化放在了FlutterBoost初始化的时候  
具体看我的另一篇博客 [Flutter和Native之间进行通信][Flutter_Native]

#### 具体效果如下 ####

其中，获取电量是与Native的通信，从而获取电量  
![在这里插入图片描述][65c01531084a4d8abc573876421c2d60.gif_pic_left]

#### 相关源码下载 ####

[Flutter与Android Native进行混合开发，相互跳转，进行通信\_示例Demo][Flutter_Android Native_Demo]

[FlutterBoost]: https://github.com/alibaba/flutter_boost/blob/master/docs/install.md
[Flutter_Android Native]: https://blog.csdn.net/EthanCo/article/details/92081278
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASGVpa28tQW5kcm9pZA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/72b75b2846f64d1a8e9c03fb884e5ae0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBASGVpa28tQW5kcm9pZA==,size_20,color_FFFFFF,t_70,g_se,x_16
[Flutter _ null-safety _1327]: https://github.com/alibaba/flutter_boost/issues/1327
[API]: https://github.com/alibaba/flutter_boost/blob/master/docs/lifecycle.md
[Flutter_Native]: https://blog.csdn.net/EthanCo/article/details/121394295
[65c01531084a4d8abc573876421c2d60.gif_pic_left]: https://img-blog.csdnimg.cn/65c01531084a4d8abc573876421c2d60.gif#pic_left
[Flutter_Android Native_Demo]: https://download.csdn.net/download/EthanCo/44326207