上一节 flutter 插件开发已经从flutter视角 介绍了flutter作为整个工程的前端展示 native plugin可以实现平台特定的功能或者组件开发。也是google 推出flutter 支持android&ios、web的全新开发模式。但是这个对于新型app可能吸引力极大。但是
1 很多公司的工程已经native 组件化,积累了很多native组件可以复用。使用flutter后全部插件化或者重新实现对于现有过度来说太浪费资源
2 很多技术的尝试在大型团队和项目中 都是遵循徐徐渐进 以单个模块的方式逐渐学习和引入。

基于以上的原因混合架构在目前还是重中一种的基础方案。FlutterBoost 作为阿里闲鱼业界最早尝鲜的技术团队 根据其实践经验推出开源了自己的方案FlutterBoost!!!
https://github.com/alibaba/flutter_boost

引入flutter_boost

在android或者ios项目的同级目录 建立flutter module 并且在yaml中添加flutter_boost的依赖
flutter_boost:
git:
url: ‘https://github.com/alibaba/flutter_boost.git
ref: ‘0.1.54’
(对于只有一个flutter的工程来说直接添加flutter_boost引用)
并且引入

  1. implementation project(':flutter_boost')

flutter端:

1 注册路由。

native和flutter widget可以注册的路由经过flutterboost.open(url)的方式相互访问
FlutterBoost.singleton.registerPageBuilders({
///可以在native层通过 getContainerParams 来传递参数
‘homePage’: (pageName, params,
) => MainWidget()//导航落地的widget,
});

2 发起调用

FlutterBoost.singleton.open(“sample://nativePage”, urlParams: {
“query”: {“aaa”: “bbb”**}
});

native android端

自定义MyApplication 继承FlutterApplication 并注册FlutterBoost
image.png
其中PageRouter就是拦截flutter调用过来的协议 并且唤起native activity的地方。
image.png
manifest.xml
image.png

并且检查
BoostChannel.registerWith(registry.registrarFor(“com.idlefish.flutterboost.BoostChannel”));
插件是否已经注册上,flutter工程中依赖flutter后默认是添加的。

新建一个FlutterFirstPageActivity 和 NativePageActivity 并且添加到manifest.xml中
准备完毕 在flutter中调用
FlutterBoost.singleton.open(“sample://nativePage”, urlParams: {
“query”: {“aaa”: “bbb”}
});吧

回调:
flutter与native之间的通信都是由channel完成:
BasicMessageChannel 实现 Flutter 与 原生(Android 、iOS)双向通信
MethodChannel 实现 Flutter 与 原生原生(Android 、iOS)双向通信
EventChannel 实现 原生原生(Android 、iOS)向Flutter 发送消息

MethodChannel:

之前语音合成插件以及官方的demo 都是基于MethodChannel的 通过result.sucess(backdata)返回值

EventChannel

则是基于stram的双向通信 比如flutter要显示系统电量的变化。则通过向EventChannel注册StreamHandler 可以向flutter推送电量的变化。

BasicMessageChannel

基于flutter与native view和activity之间的通信 BasicMessageChannel则很合适

举个例子:

flutter boost 通过url打开了一个native activity 然后当关闭时候或者其他情况可以返回数据给flutter

native侧:
image.png
关闭新打开activity后可以通过messageChannel send数据

flutter侧:
1 image.png
2
image.png

image.png
就完成了android端的回调

native ios端

配置flutter_boost
1 xcode 打开 AppDelegate.h 使用FLBFlutterAppDelegate

2 AppDelegate.m 的application中添加

PlatformRouterImp *router = [PlatformRouterImp new];//路由拦截跳转实现

  1. [FlutterBoostPlugin.sharedInstance startFlutterWithPlatform:router<br /> onStart:^(FlutterEngine *engine) {<br /> }];//注册

3 FlutterViewController controller = (FlutterViewController)self.window.rootViewController;
self.navigationController = [[UINavigationController alloc] initWithRootViewController:controller];
router.navigationController = self.navigationController;
设置navigationController (官网demo直接使用了tabViewController 而我这边是flutter构建的项目 tabbar也是有flutter实现 没有TabbarViewController,要不路由拦截无法获取navigationController实现跳转)

4
image.png
实现跳转到native view controller 。

点击关闭当前页面 回传消息
image.png

5 AppDelegate.m
1注册监听

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(notificationFuncion:) name:@”ios.to.flutter” object:nil];

2 接收消息
image.png

6 最终通过MessageChannel回传消息给flutterimage.png

效果

android

normal video.mp4 (663.62KB)

ios:

normal video.mp4 (246.57KB)

* 后续考虑基于arouter 实现flutter 与 原生页面的一些的基础支持

默认用xcode工程打开flutter 的ios module 会找不到flutter-boost 的相关的头文件
1 进入flutter ios 目录下 pod update 或者pod install 根据错误配置swift版本

2 uuid生成库
https://www.cnblogs.com/shaoting/p/10235652.html
3 ios 跳转原生需要用
UINavigationController 通过FlutterViewController初始化 然后才能获取到navigationController去调转

ios其他踩坑
混编 https://www.jianshu.com/p/bf3002de6a5e