Flutter Boost的router管理

柔情只为你懂 2022-12-25 10:58 108阅读 0赞

## 环境 ##

FlutterBoost介绍  
[咸鱼Flutter Boost介绍][Flutter Boost]

[Flutter Boost Github][]

混合开发环境搭建

[原生Android集成Flutter混合开发][Android_Flutter]

Flutter SDK版本：

v1.9.1

Flutter Boost 版本：

flutter_boost: ^0.1.63

## FlutterBoost集成 ##

FlutterBoost是以插件方式的引入到我们的native项目工程的。

### 混合工程 ###

混合开发流程可以参考：  
[原生Android集成Flutter混合开发][Android_Flutter]

### Flutter module项目集成FlutterBoost ###

在flutter\_boost\_module项目的pubspec.yaml文件中添加依赖插件配置

dependencies:
      flutter:
        sdk: flutter
    
      flutter_boost: ^0.1.63

配置完成后下载依赖插件到本地

flutter packages get

在native原生项目中rebuild工程，即可引入flutter boost插件，引入flutter boost后的代码结构。其中的amap\_base\_map是引入了地图插件才显示的，如果没有引入地图插件则不会出现该文件。

![a47901922fe7cd26717c5a2633de8335.webp][]

在这里插入图片描述

在native的项目中，在app目录下的build.gradle中添加flutter\_boost项目依赖

implementation project(':flutter_boost')

## FlutterBoost使用 ##

### Flutter工程开发 ###

在Flutter项目中创建两个测试页面Widget：FirstRouteWidget和SecondRouteWidget。代码参考了flutter\_boost的测试代码。

（1）关于onPressed里面的方法调用，其实就是调用flutter\_boost的api进行页面的跳转和传递参数。

class FirstRouteWidget extends StatelessWidget {
      static const KEY_FLUTTER_BOOST_FIRST_ROUTE = "flutterbus://flutterWidget_FirstPage";
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('First Route'),
          ),
          body: Center(
            child: RaisedButton(
              child: Text('open amap widget'),
              onPressed: () {
    //            print("open second page!");
                FlutterBoost.singleton.open("flutterbus://flutternativePage", urlParams: {"test": "flutter to flutter "})
                    .then((Map value) {print(
                      "call me when page is finished. did recieve second route result $value");});
    //            BoostContainerSettings settings = BoostContainer.of(context).settings;
    //            FlutterBoost.singleton.close(settings.uniqueId, result: {"result": "data from second"});
              },
            ),
          ),
        );
      }
    }
    
    class SecondRouteWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Second Route"),
          ),
          body: Center(
            child: RaisedButton(
              onPressed: () {
                // Navigate back to first route when tapped.
                BoostContainerSettings settings =
                    BoostContainer.of(context).settings;
                FlutterBoost.singleton.close(settings.uniqueId,
                    result: {"result": "data from second"});
              },
              child: Text('Go back with result!'),
            ),
          ),
        );
      }
    }

在main.dart中注册注册这两个页面route。

（1）在build方法中初始化Flutter Boost

（2）在initState中注册需要native启动的route。这里的pageName一定要和native启动时配置的一致，否则会找不到对应route。

class _MyAppState extends State<MyApp> {
      @override
      void initState() {
        super.initState();
        FlutterBoost.singleton.registerPageBuilders({
        //fisrt widget
          FirstRouteWidget.KEY_FLUTTER_BOOST_FIRST_ROUTE: (pageName, params, _) {
            debugPrint("params :${params.toString()}");
            return FirstRouteWidget();
          },
          //second widget
          'flutterbus://flutterSecondPage': (pageName, params, _) {
            debugPrint("params :${params.toString()}");
            return SecondRouteWidget();
          },
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Boost example',
            //初始化FlutterBoost
            builder: FlutterBoost.init(postPush: _onRoutePushed),
            home: Container());
      }
    
      void _onRoutePushed(
          String pageName, String uniqueId, Map params, Route route, Future _) {
        debugPrint("pageName :${pageName}" + "params :${params.toString()}");
      }
    }

### native项目中使用FlutterBoost ###

初始化flutter引擎。

（1）Flutter引擎初始化，代码参考Flutter\_boost demo.

（2）INativeRouter接口需要注意，不仅通过flutter启动native页面会调用该方法，而且通过flutter会用flutter页面，也会执行该方法。

（3）在Application中调用FlutterBootManager.init()方法完成初始化。

（4）NativePageRouter在启动route会用到。可以自行封装。

object FlutterBootManager {
        fun init(app: Application) {
            /**
             * 不仅打开Native页面会执行，在Flutter页面打开Flutter  widget也会执行该方法
             **/
            val router = INativeRouter { context, url, urlParams, requestCode, exts ->
                val assembleUrl = Utils.assembleUrl(url, urlParams)
                Timber.e("native open :${url} ${urlParams}")
                NativePageRouter.openPageByUrl(context, assembleUrl, requestCode)
            }
    
            val pluginsRegister = object : FlutterBoost.BoostPluginsRegister {
    
                override fun registerPlugins(mRegistry: PluginRegistry?) {
                    GeneratedPluginRegistrant.registerWith(mRegistry)
                    TextPlatformViewPlugin.register(mRegistry?.registrarFor("TextPlatformViewPlugin"))
                }
            }
    
            val platform = FlutterBoost.ConfigBuilder(app, router)
                    .isDebug(BuildConfig.DEBUG)
                    .whenEngineStart(FlutterBoost.ConfigBuilder.ANY_ACTIVITY_CREATED)
                    .renderMode(FlutterView.RenderMode.texture)
                    .pluginsRegister(pluginsRegister)
                    .build()
    
            FlutterBoost.instance().init(platform)
        }
    }

配置Flutter页面对应的Native容器。

### 页面跳转route ###

页面路由跳转我把它分成了三种情况，下面说说每中情况的代码实现。  
一、native启动flutter

（1）不携带参数：

在native测可以通过BoostFlutterActivity通过构建者模式构建一个intent。BoostFlutterActivity要注册在manifest文件中。

companion object {
            const val FLUTTER_FIRST_PAGE_URL = "flutterbus://flutterWidget_FirstPage"
        }
    
        override fun openFlutterWidget(context: Context, params: HashMap<String,Any>?): Boolean {
            try {
                val intent = BoostFlutterActivity.withNewEngine().url(FLUTTER_FIRST_PAGE_URL)
                        .backgroundMode(BoostFlutterActivity.BackgroundMode.opaque).build(context)
                context.startActivity(intent)
                return true
            } catch (e: Exception) {
                return false
            }
        }

在flutter module中打印出请求的url，和params。

FirstRouteWidget.KEY_FLUTTER_BOOST_FIRST_ROUTE: (pageName, params, _) {
            debugPrint("params :${params.toString()}");
            return FirstRouteWidget();
          }

（2）携带请求参数  
flutter module代码不变。

companion object {
            const val FLUTTER_FIRST_PAGE_URL = "flutterbus://flutterWidget_FirstPage"
        }
    
        override fun openFlutterWidget(context: Context, params: HashMap<String,Any>?): Boolean {
            try {
                var params = mutableMapOf<String,Any>()
                params["str"] = "flutter boost"
                params["in"] = 1
                val intent = BoostFlutterActivity.withNewEngine().url(FLUTTER_FIRST_PAGE_URL).params(params)
                        .backgroundMode(BoostFlutterActivity.BackgroundMode.opaque).build(context)
                context.startActivity(intent)
                return true
            } catch (e: Exception) {
                return false
            }
        }

（3）获取flutter的处理结果。  
在native测通过startActivityForResult启动flutter container。

override fun openFlutterWidgetForResult(activity: BaseActivity, params: HashMap<String,Any>?, requestCode: Int): Boolean {
            try {
                var params = mutableMapOf<String,Any>()
                params["str"] = "flutter boost"
                params["in"] = 1
                val intent = BoostFlutterActivity.withNewEngine().url(FLUTTER_FIRST_PAGE_URL).params(params)
                        .backgroundMode(BoostFlutterActivity.BackgroundMode.opaque).build(activity)
    
                activity.startActivityForResult(intent, requestCode)
                return true
            } catch (e: Exception) {
                return false
            }
        }
    }

在当前activity的onActivityResult获取请求结果  
注意这里的KEY值，这个值是定值，不可修改。并且在flutter获取native的返回值是也需要用到该值。

REQUEST_CODE -> {
                    Timber.e("flutter data :"+data?.extras?.get(IFlutterViewContainer.RESULT_KEY))
                }

![b0213c6b592977256bd45a9804141e8b.webp][]

在这里插入图片描述

在flutter module通过FlutterBoost的close方法，把处理结果返回给上一个页面。

BoostContainerSettings settings = BoostContainer.of(context).settings;
      FlutterBoost.singleton.close(settings.uniqueId, result: {"result": "data from second"});

最终native获取的返回值格式：

flutter data :{result=data from second}

二、flutter启动flutter  
（1）直接启动,不携带参数  
注意；这里还需要在native层进行实现，才能最终启动flutter route，因为flutter route需要一个native容器。

FlutterBoost.singleton.open("flutterbus://flutterSecondPage");

在native的FlutterBootManager中有个INativeRouter接口的实现类，在给INativeRouter的openContainer方法中，能获取到启动的url，请求参数urlParams、和requestCode和当前的activity的上下问context。  
在openContainer方法中，在调用启动**“native启动flutter”**的相关方法，启动flutter route。  
例如：

val intent = BoostFlutterActivity.withNewEngine().url(NATIVE_FIRST_PAGE_URL)
                            .backgroundMode(BoostFlutterActivity.BackgroundMode.opaque).build(context)
                    if(context is Activity){
                        (context as Activity).startActivityForResult(intent,0x13)
                    }

（2）携带参数启动

FlutterBoost.singleton.open("flutterbus://flutterSecondPage", urlParams: {"test": "flutter to flutter "})

（3）获取返回值  
在first route通过如下代码启动second route

FlutterBoost.singleton.open("flutterbus://flutternativePage", urlParams: {"test": "flutter to flutter "})
                    .then((Map value) {print(
                      "call me when page is finished. did recieve second route result $value");});

在second通过如下代码关闭当前页面，并返回处理的数据

BoostContainerSettings settings =
                    BoostContainer.of(context).settings;
                FlutterBoost.singleton.close(settings.uniqueId,
                    result: {"result": "data from second"});

三、flutter 启动native页面  
（1）直接启动，不带参数

FlutterBoost.singleton.open("flutterbus://flutternativePage");

在native的FlutterBootManager中有个INativeRouter接口的实现类，在给INativeRouter的openContainer方法中，能获取到启动的url，请求参数urlParams、和requestCode和当前的activity的上下问context。  
在openContainer方法中，在调用启动startActivity的相关方法，启动native route。  
例如

var intent = Intent(context,FlutterOpenNativeTestActivity::class.java)
                    if(context is Activity){
                        (context as Activity).startActivityForResult(intent,requestCode)
                    }

（2）携带请求参数  
在INativeRouter的openContainer方法，可以获取到请求的参数。  
这里的请求最终会执行到native的INativeRouter 实现类。

FlutterBoost.singleton.open("flutterbus://flutternativePage", urlParams: {"test": "flutter to flutter "})

（3）获取返回值  
flutter 的代码实现

native的代码实现  
注意点：putExtra的key是定值，并且值只能是map。

close_btn.setOnClickListener{
                var map = mutableMapOf<String,Any>()
                map.put("native","test native")
                intent.putExtra(IFlutterViewContainer.RESULT_KEY,(map as Serializable))
    
                setResult(Activity.RESULT_OK,intent)
                finish()
            }

四、native启动native  
和原生开发没有区别。

PS：主要点不是flutter\_boost的API使用，而是获取返回值的阅读官方demo遇到的坑，demo写的不够全面，一些常见的场景都没有覆盖。

作者：无名长空剑\_real  
链接：https://www.jianshu.com/p/8008082248e6  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[Flutter Boost]: https://links.jianshu.com/go?to=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2Fv-wwruadJntX1n-YuMPC7g
[Flutter Boost Github]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Falibaba%2Fflutter_boost
[Android_Flutter]: https://links.jianshu.com/go?to=https%3A%2F%2Fjuejin.im%2Fpost%2F5dd6596b5188254e207cafbd
[a47901922fe7cd26717c5a2633de8335.webp]: /images/20221120/3c7a72f8cb384decaa53ff9081041012.png
[b0213c6b592977256bd45a9804141e8b.webp]: https://img-blog.csdnimg.cn/img_convert/b0213c6b592977256bd45a9804141e8b.webp