環(huán)境配置

因為是在iOS已有項目中集成Flutter，所以正常情況的環(huán)境是macOS + Xcode + flutter環(huán)境；再加上flutter 需要的的dart語言編輯器 Android Studio 、IntelliJ IDEA 或 Visual Studio Code (VS Code) ；因為flutter是多平臺，所以也要安裝安卓相關(guān)的SDK。macOS下搭建Flutter開發(fā)環(huán)境可以參考 Mac下搭建Flutter開發(fā)環(huán)境。

創(chuàng)建Flutter項目

Flutter項目最好獨立于iOS項目，不要耦合進iOS項目中，最好放在與項目目錄同級。
在iOS項目目錄下終端運行:

flutter create -t module flutter_module

運行完成后，iOS項目與Flutter項目層級如下：

iOS工程配置

• 因為Flutter混合開發(fā)還不支持bit code，所以在iOS工程中需要關(guān)閉bit code。
  

• 創(chuàng)建Xcode項目中的Config文件，引向flutter module
  新建Config目錄，管理Xcode工程的配置銜接文件，分別創(chuàng)建 Flutter.xcconfig 、Debug.xcconfig、Release.xcconfig 三個配置文件；其中Flutter.xcconfig 是指向外目錄flutter module的Generated.xcconfig 文件路徑引用文件，其他兩個代表Xcode的環(huán)境配置文件。
  

三個文件的引入內(nèi)容 （所引用的都是絕對路徑，最終都是指引到 Generated.xcconfig）

Flutter.xcconfig:

#include "../../flutter_module/.ios/Flutter/Generated.xcconfig"
ENABLE_BITCODE=NO

Debug.xcconfig:

#include "Flutter.xcconfig"

Release.xcconfig:

#include "Flutter.xcconfig"
FLUTTER_BUILD_MODE=release

• 修改Xcode project環(huán)境配置
  

• 最重要： 引入xcode-backend.sh

在iOS工程里添加運行腳本 "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build，并且確保Run Script這一行在"Target dependencies" 或者 "Check Pods Manifest.lock"后面。

點擊Xcode運行，會執(zhí)行到xcode-backend.sh腳本；如果運行成功，則說明環(huán)境配置的都沒問題，此時在Flutter工程下的.ios/Flutter/目錄下會生成App.framework和/engine/Flutter.framework，其中App.framework即為Flutter工程生成的產(chǎn)物。

打包framework命令

flutter build ios-framework --output=/Users/Desktop/FlutterTest

導入Flutter工程產(chǎn)物到iOS工程中

方法一：可以將Flutter工程中生成的App.framework和Flutter.framework產(chǎn)物拷貝到iOS工程中，然后再鏈接到iOS項目中。
該方法存在的問題：每次修改完Flutter代碼重新打包生成App.framework產(chǎn)物后都需要重新拷貝到iOS工程中。

方法二：直接讓iOS項目鏈接Flutter工程下的App.framework和Flutter.framework產(chǎn)物，然后修改導入framework的路徑，這樣修改Flutter的代碼后通過運行Xcode即可得到最新Flutter工程的產(chǎn)物。

導入App.framework和Flutter.framework后需要將Embed改成Embed & Sign。

至此，Xcode與Flutter之間混編配置完成，兩個項目文件已經(jīng)關(guān)聯(lián)上了。這時候你就可以修改main.dart 文件內(nèi)容，重新編譯運行Xcode 則APP.framework自動會被編譯成最新的flutter代碼。

下面開始寫代碼了

從iOS頁面跳轉(zhuǎn)到Flutter頁面

• 將Flutter工程下的main.dart替換成下面的代碼:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: "My App",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("My App"),
        ),
        body: Center(
          child: Text("Hello World!"),
        ),
      ),
    );
  }
}

• iOS工程點擊屏幕跳轉(zhuǎn)到Flutter頁面:

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
    flutterVC.modalPresentationStyle = UIModalPresentationFullScreen;
    [self presentViewController:flutterVC animated:YES completion:nil];
}

• 點擊Xcode運行，點擊屏幕就可以跳轉(zhuǎn)到Flutter頁面，效果圖如下：

iOS原生與Flutter進行交互

• Flutter調(diào)用iOS的方法，iOS返回結(jié)果給Flutter：
  main.dart代碼:

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

void main() {
  runApp(MyHome());
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Home",
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State <MyHomePage> {
  // 創(chuàng)建一個給native的channel(類似于iOS的通知)
  static const methodChannel = const MethodChannel('com.pages.your/native_get');

  var _leftNumber = 10;
  var _rightNumber = 20;
  var _result = 0;

  Future<Null>_callNativeMethodToCalculateAdd() async {
    dynamic result;
    try {
      // Flutter調(diào)用Native
      result = await methodChannel.invokeMethod('callAdd', {"left": _leftNumber, "right": _rightNumber});
    } on PlatformException {
      result = 0;
    }

    setState(() {
      _result = result;
    });
  }

  Future<Null>_callNativeMethodToCalculateMul() async {
    dynamic result;
    try {
      // Flutter調(diào)用Native
      result = await methodChannel.invokeMethod('callMul', {"left": _leftNumber, "right": _rightNumber});
    } on PlatformException {
      result = 0;
    }

    setState(() {
      _result = result;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('My Home'),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: GestureDetector(
                child: Text("調(diào)用native方法計算加法"),
                onTap: () {
                  _callNativeMethodToCalculateAdd();
                },
              ),
              color: Colors.grey,
              margin: EdgeInsets.only(bottom: 20),
            ),
            Container(
              child: GestureDetector(
                child: Text("調(diào)用native方法計算乘法"),
                onTap: () {
                  _callNativeMethodToCalculateMul();
                },
              ),
              color: Colors.grey,
              margin: EdgeInsets.only(bottom: 20),
            ),
            Container(
              child: Text("計算結(jié)果是: ${_result}"),
            )
          ],
        ),
      ),
    );
  }
}

iOS代碼：

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
    flutterVC.modalPresentationStyle = UIModalPresentationFullScreen;
    [self presentViewController:flutterVC animated:YES completion:nil];
    
    // 要與main.dart中一致
    NSString *channelName = @"com.pages.your/native_get";
    
    FlutterMethodChannel *messageChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterVC];
    [messageChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        NSDictionary *numbers = call.arguments;
        NSInteger left = [numbers[@"left"] integerValue];
        NSInteger right = [numbers[@"right"] integerValue];
        NSInteger r = 0;
        if ([call.method isEqualToString:@"callAdd"]) {
            r = left + right;
        } else if ([call.method isEqualToString:@"callMul"]) {
            r = left * right;
        }
        result(@(r));
    }];
}

運行結(jié)果：

• iOS主動調(diào)用Flutter

一般用于flutter初始化需要從客戶端獲取一些參數(shù)作為渲染條件；類似iOS這邊的KVO，監(jiān)聽flutter是否已經(jīng)在監(jiān)聽，監(jiān)聽的時候回調(diào)到代理[這步其實還是flutter監(jiān)聽的時候，內(nèi)部發(fā)了一個通知，iOS這邊收到并回調(diào)，iOS Native處理代理，并回調(diào)給flutter所需要參數(shù)]

main.dart代碼:

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

void main() {
  runApp(MyHome());
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Home",
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 注冊一個通知
  static const EventChannel eventChannel = const EventChannel("com.pages.your/native_post");

  // 渲染前的操作，類似于iOS中的viewDidLoad
  @override
  void initState() {
    super.initState();

    // 監(jiān)聽事件，同事發(fā)送參數(shù)12345
    eventChannel.receiveBroadcastStream(12345).listen(_onEvent, onError: _onError);
  }

  String naviTitle = "";

  // 回調(diào)事件
  void _onEvent(Object event) {
    setState(() {
      naviTitle = event.toString();
    });
  }

  // 錯誤返回
  void _onError(Object error) {

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My Home"),
      ),
      body: Center(
        child: Text(naviTitle),
      ),
    );
  }
}

iOS代碼:

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

@interface ViewController () <FlutterStreamHandler>
{
    int I;
    FlutterEventSink _events;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerRun) userInfo:nil repeats:YES];
}

- (void)timerRun {
    if (_events) {
        _events(@(i++));
    }
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
    flutterVC.modalPresentationStyle = UIModalPresentationFullScreen;
    [self presentViewController:flutterVC animated:YES completion:nil];
    
    // 要與main.dart中一致
    NSString *channelName = @"com.pages.your/native_post";
    
    FlutterEventChannel *eventChannel = [FlutterEventChannel eventChannelWithName:channelName binaryMessenger:flutterVC];
    [eventChannel setStreamHandler:self];
}

#pragma mark - FlutterStreamHandler
// 這個onListen是Flutter端開始監(jiān)聽這個channel時的回調(diào)，第二個參數(shù)EventSink是用來傳數(shù)據(jù)的載體
- (FlutterError *)onListenWithArguments:(id)arguments eventSink:(FlutterEventSink)events {
    // arguments 是 flutter給native的參數(shù)
    // 回調(diào)給flutter，建議使用實例指向，因為該block可以使用多次
    _events = events;
    return nil;
}

// flutter不在接收
- (FlutterError *)onCancelWithArguments:(id)arguments {
    // arguments flutter給native的參數(shù)
    return nil;
}

@end

運行結(jié)果：

交互總結(jié)
這兩種方式都差不多，一個使用的是block，一個使用的是delegate，最終回調(diào)給flutter都是通過block。

MethodChannel 使用block，上下文更加明確；同一個channel name可以根據(jù)flutter給回的call.method、call.arguments更加靈活的處理回調(diào)handle, 回調(diào)只能使用一次（意思就是就算你創(chuàng)建一個實例指向block，單block回調(diào)只能使用一次，回調(diào)之后flutter block那邊不再接收）；

EventChannel 使用delegate，代碼層次更鮮明；同一個channel name只能通過判斷arguments參數(shù)處理回調(diào)handle, 回調(diào)可以使用多次（創(chuàng)建一個實例指向block，該block可以向flutter發(fā)送多次）；

參考

iOS Native混編Flutter交互實踐
iOS老項目集成Flutter（iOS混編Flutter）
Flutter官方文檔
Flutter中文網(wǎng)