Flutter 混合开发FlutterBoost iOS接入

首选需要把fullter项目集成入ios项目中 集成教程 https://blog.youkuaiyun.com/ly410726/article/details/91543405

1.在Flutter项目中添加依赖项

打开pubspec.yaml并将以下行添加到依赖项：

flutter_boost: ^0.0.415

或者可以直接依赖github的项目的版本，Tag，pub发布会有延迟，推荐直接依赖Github项目

flutter_boost:
        git:
            url: 'https://github.com/alibaba/flutter_boost.git'
            ref: '0.0.415'

之后调用Package get，右上角即可查看，之后还是在.android 文件下执行 gradlew assembleDebug，完成依赖下载。

然后在iOS的根目录下执行pod install 使iOS和flutter都添加FlutterBoost插件

2.Dart代码的集成

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    //其中pageName为原生代码传递过来的路由名称（first，second，flutterFragment）都是路由名称 params为原生传递过来的参数 
    FlutterBoost.singleton.registerPageBuilders({
      'first': (pageName, params, _) => FirstRouteWidget(),
      'second': (pageName, params, _) => SecondRouteWidget(),
      'flutterFragment': (pageName, params, _) => FragmentRouteWidget(params),
    });

    FlutterBoost.handleOnStartPage();
  }



  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Boost example',
        builder: FlutterBoost.init(postPush: _onRoutePushed),
        home: Container(
        ));
  }

  void _onRoutePushed(
      String pageName, String uniqueId, Map params, Route route, Future _) {
  }
}

class FirstRouteWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('与原生push一样的页面'),
            onPressed: () {
              //dart通过原生跳转dart页面
              FlutterBoost.singleton.openPage("first", {
                "query": {"aaa": "eee","ccc":"ddd"}
              }, animated: true);
            },
          ),
          RaisedButton(
            child: Text('Go back!'),
            onPressed: () {
              //关闭dart页面
              FlutterBoost.singleton.closePageForContext(context);
            },
          )
        ],
      ),
    );
  }
}

class SecondRouteWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // 关闭dart页面
            FlutterBoost.singleton.closePageForContext(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

class FragmentRouteWidget extends StatelessWidget {
  //原生传递过来的参数
  final Map params;

  FragmentRouteWidget(this.params);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('参数展示'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(top: 32.0),
            child: Text(
              params['key'] ?? '',
              style: TextStyle(fontSize: 28.0, color: Colors.red),
            ),
            alignment: AlignmentDirectional.center,
          ),
          RaisedButton(
            onPressed: () {
              //dart跳转原生页面以及传递参数
              FlutterBoost.singleton.openPage("first", {
                "query": {"key": "我是flutter传递的参数","type":"App"}
              }, animated: true);

            },
            child: Text('跳转原生页面以及传递参数'),
          ),
        ],
      ),
    );
  }
}

使用Flutter Boost在dart代码打开页面以及传递参数

//openPage通过调用原生代码来调整dart页面以及原生界面。通过pagename这个参数来判断调整到那个页面 {}里面可以进行参数传递
FlutterBoost.singleton.openPage("pagename", {}, true);

使用Flutter Boost在dart代码关闭页面

FlutterBoost.singleton.closePageForContext(context);

3.iOS工程的修改

需要 将libc++ 加入 "Linked Frameworks and Libraries"
这个主要是项目的General 的Linked Frameworks and Libraries 栏下，点击加号（+）搜索libc++,找到libc++.tbd即可

修改AppDelegate.h文件

#import <UIKit/UIKit.h>
#import <flutter_boost/FlutterBoost.h>
#import <CoreData/CoreData.h>

//需要继承FLBFlutterAppDelegate
@interface AppDelegate : FLBFlutterAppDelegate <UIApplicationDelegate>

@property (readonly, strong) NSPersistentContainer *persistentContainer;

- (void)saveContext;

修改AppDelegate.m文件

#import "AppDelegate.h"
#import <flutter_boost/FlutterBoost.h>
#import "DemoRouter.h"
#import "ViewController.h"
@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen].bounds];
    [self.window makeKeyAndVisible];
    
    
    ViewController *tabVC = [[ViewController alloc] init];
    UINavigationController *rvc = [[UINavigationController alloc] initWithRootViewController:tabVC];
    
    
    //DemoRouter为创建的实现FLBPlatform的类 FLBPlatform协议里面实现的是原生跳转flutter页面、flutter跳转原生页面、flutter跳转flutter页面 、以及退出flutter页面的方法
    DemoRouter *router = [DemoRouter sharedRouter];
    router.navigationController = rvc;
    //在应用程序开头使用FLBPlatform初始化FlutterBoost
    [FlutterBoostPlugin.sharedInstance startFlutterWithPlatform:router
                                                        onStart:^(FlutterViewController *fvc) {
                                                            
                                                        }];
    self.window.rootViewController = rvc;
    
    return YES;
    
}

实现FLBPlatform协议

FLBPlatform协议里面实现的是原生跳转flutter页面、flutter跳转原生页面、flutter跳转flutter页面 、以及退出flutter页面的方法。创建DemoRouter类来实现FLBPlatform协议

DemoRouter.h文件

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <flutter_boost/FLBPlatform.h>

NS_ASSUME_NONNULL_BEGIN

@interface DemoRouter : NSObject<FLBPlatform>

@property (nonatomic,strong) UINavigationController *navigationController;

+ (DemoRouter *)sharedRouter;

DemoRouter.m文件

#import "DemoRouter.h"
#import <flutter_boost/FlutterBoost.h>
#import "ViewController.h"
@implementation DemoRouter

+ (DemoRouter *)sharedRouter
{
    static id instance = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        instance = [[self alloc] init];
    });
    return instance;
}

- (void)openPage:(NSString *)name
          params:(NSDictionary *)params
        animated:(BOOL)animated
      completion:(void (^)(BOOL))completion
{
    NSLog(@"打开页面传递的参数 = %@",params);
    NSString *type = [[params objectForKey:@"query"] objectForKey:@"type"];
    if ([type isEqualToString:@"App"]) {
        //测试flutter跳转原生以及传递参数
        ViewController *vc = [[ViewController alloc] init];
        vc.title = [[params objectForKey:@"query"] objectForKey:@"key"];
        [self.navigationController pushViewController:vc animated:animated];
        return;
    }
    //原生（flutter）跳转flutter页面 的方法
    if([params[@"present"] boolValue]){
        FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController presentViewController:vc animated:animated completion:^{}];
    }else{
        FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController pushViewController:vc animated:animated];
    }
}

- (BOOL)accessibilityEnable
{
    return YES;
}

- (void)closePage:(NSString *)uid animated:(BOOL)animated params:(NSDictionary *)params completion:(void (^)(BOOL))completion
{
    NSLog(@"关闭页面传递的参数 = %@",params);
    FLBFlutterViewContainer *vc = (id)self.navigationController.presentedViewController;
    if([vc isKindOfClass:FLBFlutterViewContainer.class] && [vc.uniqueIDString isEqual: uid]){
        [vc dismissViewControllerAnimated:animated completion:^{}];
    }else{
        [self.navigationController popViewControllerAnimated:animated];
    }
}
@end

 

很多操作都是在FLBPlatform协议实现类中，包括页面跳转，关闭，以及对应的一些Flutter 和Native通信

其中跳转页面的方法为

原生-->Flutter

FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
        [vc setName:name params:params];
        [self.navigationController presentViewController:vc animated:animated completion:^{}];

Flutter-->原生

FlutterBoost.singleton.openPage("pagename", {}, true);

ViewController.h/m页面的修改

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end

ViewController.m

#import "ViewController.h"
#import "AppDelegate.h"
#import <Flutter/Flutter.h>
#import "DemoRouter.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    UIButton *pushBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [pushBtn addTarget:self
               action:@selector(pushAction)
     forControlEvents:UIControlEventTouchUpInside];
    [pushBtn setTitle:@"push页面" forState:UIControlStateNormal];
    [pushBtn setBackgroundColor:[UIColor blueColor]];
    pushBtn.frame = CGRectMake(80.0, 180.0, 160.0, 40.0);
    [self.view addSubview:pushBtn];
    
    UIButton *presentBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [presentBtn addTarget:self
                action:@selector(presentAction)
      forControlEvents:UIControlEventTouchUpInside];
    [presentBtn setTitle:@"present页面" forState:UIControlStateNormal];
    [presentBtn setBackgroundColor:[UIColor blueColor]];
    presentBtn.frame = CGRectMake(80.0, 260.0, 160.0, 40.0);
    [self.view addSubview:presentBtn];
    
    UIButton *passBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [passBtn addTarget:self
                   action:@selector(passAction)
         forControlEvents:UIControlEventTouchUpInside];
    [passBtn setTitle:@"参数传递" forState:UIControlStateNormal];
    [passBtn setBackgroundColor:[UIColor blueColor]];
    passBtn.frame = CGRectMake(80.0, 340.0, 160.0, 40.0);
    [self.view addSubview:passBtn];
}

#pragma mark 调用DemoRouter页面实现页面跳转
- (void)pushAction {
    [DemoRouter.sharedRouter openPage:@"first" params:@{} animated:YES completion:^(BOOL f){}];
}

-(void)presentAction{
    [DemoRouter.sharedRouter openPage:@"second" params:@{@"present":@(YES)} animated:YES completion:^(BOOL f){}];
}

-(void)passAction
{
    [DemoRouter.sharedRouter openPage:@"flutterFragment" params:@{@"present":@(NO),@"key":@"我是传递过来的参数",@"第二个参数":@""} animated:YES completion:^(BOOL f){}];
}


@end