前言

FlutterBoost是阿里巴巴咸鱼推出的一套Native与Flutter混合框架，方便在现有Native项目中集成Flutter模块，官方声明，使用FlutterBoost就像原生使用WebView一样简单，它主要的有点是很好的解决了Native与Flutter之间混合跳转路由管理。

集成步骤

1. 选择项目文件夹

2. 创建flutter module

  • 在该文件夹中，创建flutter module 命令：
1
flutter create -t module flutter_module(module名称)
  • 在module工程pubspec.yaml中加入FlutterBoost依赖，具体参照官方github
  • 在main.dart中初始化FlutterBoost，代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@override
Widget build(BuildContext context) {
  return MaterialApp( 
    title: 'Flutter Route example',
    // 这儿是初始化代码
    builder: FlutterBoost.init(postPush: _onRoutePushed),
    routes: {
      "first": (context) => FirstRouteWidget()
    },
    home: Container( 
      color: Colors.blue,
    ),
  );
}
/// push回调
void _onRoutePushed(
  String pageName, String uniqueId, Map params, Route route, Future _) {
}
  • 在initState中注册所有涉及到路由跳转的url和界面关系，代码：
1
2
3
4
5
6
7
8
9
@override
void initState() {
  super.initState();

  FlutterBoost.singleton.registerPageBuilders({
    'first': (pageName, param, _) => FirstRouteWidget(),
    'second': (pageName, param, _) => SecondRouteWidget(),
  });
}

3. 创建iOS项目

  • 在该文件夹中，创建iOS项目，添加Podfile，在Podfile中加入flutter module的路径，Podfile内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
platform :ios, '9.0'
use_frameworks!

# 引入flutter module
flutter_application_path = '../flutter_module/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'BoostDemo' do

  # 安装Flutter module中的相关pod (暂时找到这种方法可用) 
  install_all_flutter_pods(flutter_application_path)

  # 其他iOS项目需要的三方库，
  # pod 'SnapKit'

end
  • 运行pod install，成功后iOS工程中Pods下Development Pods文件夹中应该是会有Flutter、flutter_boost等文件夹
  • 网上说需要加script，我这边加了报错，最后没有加
  • 能够运行起来说明就集成成功了

4. 在iOS项目中实现遵循FLBPlatform协议的类，该类用来控制整个路由，包括iOS跳Flutter、Flutter跳iOS，见后面详细解释

5. 在AppDelegate中集成FlutterBoost代码，主要是将4中的FLBPlatform实例传入，统一管理路由（像是一个全局跨端的单例），代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import flutter_boost

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:[UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // PlatformRouterImp即实现了FLBPlatform的类
    let router = PlatformRouterImp();
    FlutterBoostPlugin.sharedInstance().startFlutter(with: router, onStart: { (engine) in
    });

    // Xcode 11新建iOS项目详情，查看iOS -> 适配
    window = UIWindow(frame: UIScreen.main.bounds)
    let vc = EntryVC()
    let nav = UINavigationController(rootViewController: vc)
    window?.rootViewController = nav
    window?.makeKeyAndVisible()

    return true
}

6. 4中FLBPlatform类的详解，里面有open，present，close三个协议，主要看下open

  • Native调用FlutterBoostPlugin.open(url, param, exts)或者Flutter调用FlutterBoost.singleton.open(url, param, exts)方法都会走到该协议，所以整个路由控制都是在native的该协议实现的，里面可以通过url定义标识来判断是Flutter跳Native还是native跳Flutter。且可以通过url详细的单独处理单个VC。
  • 路由控制还是有两种，一是Native全部控制，二是Flutter的自己控制，具体要看界面的分配
    • Native全部控制路由，则每次Native调Flutter，FLBFlutterViewContainer都要包在Native的navigationController中，这样Flutter的导航操作也需要在原生控制，感觉这种适合Flutter界面少的情况
    • Flutter的路由自己控制，这个涉及到导航栏的显示与隐藏，如果是原生的话就显示，是Flutter就隐层使用它自己的，这个适合大部分是Flutter界面的情况(我们现在就是)，FlutterBoost只是用来确保路由栈可以有效管理

缺陷

使用FlutterBoost如何将Flutter界面显示为rootVC