flutter_boost混合开发框架集成教程

95 篇文章 0 订阅

背景

随着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原生

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值