背景
随着Flutter的发展,国内越来越多的App开始使用Flutter。为了降低风险,大部分App采用渐进式方式引入Flutter,在App里选几个页面用Flutter来编写,但都碰到了相同的问题,在原生页面和Flutter页面共存的情况下,如何管理路由? 官方没有提供这样的解决方案,而FlutterBoost就是为了解决这个问题而生。
开源方案对比
集成流程
flutter配置
第一步:在pubspec.yaml添加依赖
flutter_boost:
git:url: 'https://github.com/alibaba/flutter_boost.git'
ref: 'v3.0-null-safety-preview.18'
第二步:在flutter的model的main设置路由
第三步:在flutter的model的main设置FlutterBoostApp路由配置
安卓配置
第一步:Application继承FlutterApplication初始化FlutterBoost
第二步:MainActivity继承FlutterBoostActivity初始化flutter首页
iOS配置
第一步:
1.首先在自己的创建的iOS工程目录下,执行pod init,之后执行一次pod install
2.打开创建的Podfile文件,添加以下代码
flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
install_all_flutter_pods(flutter_application_path)
第二步:
添加之后,您的Podfile应该类似下面这样
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'BoostTestIOS' do
use_frameworks!
install_all_flutter_pods(flutter_application_path)
end
然后再执行pod install,安装完成
第三步:
创建BoostDelegate类, 这里面的内容是完全可以自定义的,BoostDelegate类用于定义pushNativeRoute(flutter跳iOS页面)、pushFlutterRoute(iOS跳flutter页面)和popRoute(退出页面)等方法的实现。 class BoostDelegate: NSObject,FlutterBoostDelegate {
///您用来push的导航栏
var navigationController:UINavigationController?
///用来存返回flutter侧返回结果的表
var resultTable:Dictionary<String,([AnyHashable:Any]?)->Void> = [:];
。。。。。。 }
第四步:
在AppDelegate的didFinishLaunchingWithOptions方法中进行初始化配置
//注册Flutter调原生的插件及设置
let delegate = BoostDelegate() FlutterBoost.instance().setup(application, delegate: delegate) { engine in let plugin:FlutterBoostPlugin = FlutterBoostPlugin.getPlugin(engine); plugin.delegate = delegate if let message = registrar?.messenger() {
///注册插件
FBNativeRouterApiSetup(message, plugin as! FBNativeRouterApi) } }
使用教程:
flutter跳转安卓/iOS原生
安卓原生跳转flutter原生
IOS原生跳转flutter原生