原生iOS工程嵌入Flutter（二）

原生iOS工程嵌入Flutter（一）

上一篇讲如何在原生oc工程中简单的嵌入Flutter页面。那如果有多个Flutter页面咋办？原生的页面和Flutter页面又如何做通讯呢？

如果有多个Flutter页面，那么我们就不能像之前那样去简单的创建一个FlutterViewController了。通常要把Flutter engine抽出来做成一个单利，通过Flutter engine来初始化FlutterViewController。

1. 现在Flutter module端创建2个flutter页面。showCode:

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

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

class _MyAppState extends State<MyApp> {
  // This widget is the root of your application.
  String pageIndex = 'one';
  final MethodChannel methodChannel1 = MethodChannel('one_page');
  final MethodChannel methodChannel2 = MethodChannel('two_page');
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    methodChannel1.setMethodCallHandler((call) {
      if (call.method == 'initParms') {
        Map parms = call.arguments;
        setState(() {
          pageIndex = parms['pageName'].toString();
        });
      }
      return null;
    });

    methodChannel2.setMethodCallHandler((call) {
      if (call.method == 'initParms') {
        Map parms = call.arguments;
        setState(() {
          pageIndex = parms['pageName'].toString();
        });
      }
      return null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: _rootPage(pageIndex));
  }

  Widget _rootPage(String pageIndex) {
    if (pageIndex == 'one') {
      return Scaffold(
        appBar: AppBar(
          title: Text('$pageIndex'),
        ),
        body: Center(
            child: RaisedButton(
          onPressed: () {
            MethodChannel('one_page').invokeMapMethod('popTo');
          },
          child: Text('页面$pageIndex'),
        )),
      );
    } else if (pageIndex == 'two') {
      return Scaffold(
        appBar: AppBar(
          title: Text('$pageIndex'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              MethodChannel('two_page').invokeMapMethod('popTo');
            },
            child: Text('页面$pageIndex'),
          ),
        ),
      );
    }
    return null;
  }
}

2. 在原生的oc页面中，有2个按钮，点击按钮present到不同flutter页面。showCode:

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

@interface ViewController ()
@property(nonatomic,strong)FlutterEngine* myEngine;
@property(nonatomic,strong)FlutterViewController* flutterVC;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"首页";
    self.flutterVC = [[FlutterViewController alloc]initWithEngine:self.myEngine nibName:nil bundle:nil];
    self.flutterVC.modalPresentationStyle = 0;
}

-(FlutterEngine *)myEngine{
    if (!_myEngine) {
        FlutterEngine* flutterEngine = [[FlutterEngine alloc]initWithName:@"IPBao"];
        if (flutterEngine.run) {
            _myEngine = flutterEngine;
        }
    }
    return _myEngine;
}

- (IBAction)pushToFlutterVC:(UIButton *)sender {
    FlutterMethodChannel* channel = [FlutterMethodChannel methodChannelWithName:@"one_page" binaryMessenger:self.flutterVC];
    [channel invokeMethod:@"initParms" arguments:@{@"pageName":@"one"}];  // 这里执行，会调用flutter里面的methodchannel。
    
    [channel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        if ([call.method isEqualToString:@"popTo"]) {
            [self.flutterVC dismissViewControllerAnimated:YES completion:nil];
        }
    }];
    [self presentViewController:self.flutterVC animated:YES completion:nil];
}
- (IBAction)pushToFlutterVC2:(UIButton *)sender {
    FlutterMethodChannel* channel = [FlutterMethodChannel methodChannelWithName:@"two_page" binaryMessenger:self.flutterVC];
    [channel invokeMethod:@"initParms" arguments:@{@"pageName":@"two"}];  // 这里执行，会调用flutter里面的methodchannel。
    __weak typeof(self) weakSelf = self;
    [channel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        if ([call.method isEqualToString:@"popTo"]) {
            [weakSelf.flutterVC dismissViewControllerAnimated:YES completion:nil];
        }
    }];
    [self presentViewController:self.flutterVC animated:YES completion:nil];
}
@end

效果图.gif

最后，安利一个阿里的flutter框架https://github.com/alibaba/flutter_boost，直接用它不香么！！！

flutter_boost.png