Flutter、iOS混合開發實踐

步驟一：新建iOS工程，使用CocoaPods管理工程

在iOS_Flutter_MixBuilder目錄下新建Xcode project，開啟Xcode選擇Create a new Xcode project -> 選擇Single View App -> 將工程命名為ios_app -> 選擇剛剛新建的資料夾（iOS_Flutter_MixBuilder），create。

啟動終端在iOS_Flutter_MixBuilder/ios_app目錄下依次執行一下命令：

pod init
pod install
複製程式碼

步驟二：新建Flutter Module

開啟終端切換到iOS_Flutter_MixBuilder目錄下，執行下面命令：

flutter create -t module my_flutter複製程式碼

my_flutter為module的名字，執行完命令等待即可。

此時我們觀察一下Flutter Module檔案目錄，首先顯示隱藏檔案（在 macOS Sierra及以上(Mojave)，我們可以使用快捷鍵 ⌘⇧.(Command + Shift + .) 來快速（在 Finder 中）顯示和隱藏隱藏檔案）。

隱藏資料夾.ios內檔案不需要更改，每次flutter clean、flutter packages get操作後會重新生成。給Flutter Module新增任意外掛引用後執行

開啟pubspec.yaml檔案，該檔案管理Flutter外掛的依賴。新增資料持久化外掛依賴，儲存檔案。終端切換到my_flutter目錄下，執行下面命令：

cd /Users/admin/Desktop/WJJ_WJJ/iOS_Flutter_MixBuilder/my_flutter複製程式碼

flutter pub get複製程式碼

注意：為了防止沒有科學上網引起flutter pub get操作經常卡死，我們可以更換中國映象https://flutter.io/community/china，更換操作：

vi ~/.bash_profile 複製程式碼

export PUB_HOSTED_URL=https://pub.flutter-io.cn複製程式碼

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn複製程式碼

步驟三：將Flutter Module編譯成framework，引入iOS工程

這裡有兩種方式：

• 方式一：在iOS工程的podfile檔案中新增如下程式碼,my_flutter為Flutter Module名

flutter_application_path = '../my_flutter/'

load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

install_all_flutter_pods(flutter_application_path)
複製程式碼

然後切到iOS工程目錄ios_app下，執行：

pod install複製程式碼

開啟iOS工程可以看到，Flutter相關的檔案已被引入iOS工程中。

該方法好處是一步到位且是官方推薦的第一種方式，但需要每個引用framework的開發者電腦都有Flutter環境，且需要引用的framework分佈在不同的資料夾裡，檢視繁瑣，很顯然這不友好。

• 方式二：將Flutter Module編譯產物通過CocoaPods引入工程

先對Flutter Module進行編譯，選擇debug模式或者release模式。注意：應新增--no-codesign防止證書引起的編譯不通過。

終端切到my_flutter資料夾下執行下面命令（根據需要二選一）：

flutter build ios --debug --no-codesign //編譯debug產物（選擇不需要證書）複製程式碼

flutter build ios --release --no-codesign //編譯release產物（選擇不需要證書）複製程式碼

命令執行成功後觀察資料夾變化，build/ios/Debug-iphoneos資料夾存放著編譯產物FlutterPluginRegistrant.framework和shared_preferences.framework。

上面的兩個framework是Flutter程式碼編譯產物，除此之外我們還需要包含Flutter資源的庫App.framework它在.ios/Flutter/目錄下，以及Flutter的engine執行庫Flutter.framework它在.ios/Flutter/engine/目錄下。

因為CocoaPods無法直接管理framework檔案，所以我們需要把上面找到的四個檔案簡單的封成一個Pod庫。

終端切到iOS_Flutter_MixBuilder資料夾下執行下面命令，回答一波靈魂拷問後，建立名為flutter_lib的Pod庫：

pod lib create flutter_lib複製程式碼

新建Pod庫成功後會自動彈出例子工程，關掉它，觀察檔案目錄。

簡單介紹一下Pod庫，flutter_lib.podspec檔案是Pod庫的配置檔案，在該檔案裡可以指定Pod庫的版本、以及庫內容檔案的地址等資訊。

現在我們只需要把先前得到的四個Flutter庫檔案放到/flutter_lib/目錄下的一個新資料夾ios_frameworks中，再在flutter_lib.podspec檔案中指定ios_frameworks的路徑就大功告成了。手動效率太低，這裡借鑑了作者：做人要簡單的指令碼進行自動化處理。

將指令碼build_file.sh放入my_flutter資料夾

終端切到my_flutter資料夾下執行下面命令使指令碼工作：

sh build_file.sh複製程式碼

指令碼執行成功後檢視檔案目錄，我們所需要的framework已經出現在指定位置。

flutter_lib/ios_frameworks資料夾下的四個framework在flutter_lib.podspec檔案中需要被申明指定，flutter_lib.podspec中程式碼如下：

至此，本次所要製作的Flutter framework Pod庫已經完成，下面只需要在iOS工程中將這個Pod庫以本地的形式引入即可。開啟iOS_Flutter_MixBuilder/ios_app/Podfile檔案新增下面程式碼：

pod 'flutter_lib', :path => '../flutter_lib'複製程式碼

切到iOS_Flutter_MixBuilder/ios_app目錄下執行Pod指令：pod install

指令成功後開啟iOS工程檢視，此時我們所製作Pod庫已經成功被引入iOS工程，build一下iOS工程，成功！

步驟四：編寫測試程式碼，檢視結果

在iOS中顯示Flutter頁面有兩種思路：

1. 例項化一個FlutterViewController物件 -> 為FlutterViewController指定路由 -> push/present到FlutterViewController
2. 例項化一個FlutterEngine -> 為FlutterEngine指定路由 -> FlutterEngine run -> 使用FlutterEngine建立一個FlutterViewController -> push/present到FlutterViewController  

@property (nonatomic, strong) FlutterViewController *flutterViewController;複製程式碼

//初始化FlutterViewController
self.flutterViewController = [[FlutterViewController alloc] init];
//為FlutterViewController指定路由以及路由攜帶的引數
[self.flutterViewController setInitialRoute:@"route1?{\"message\":\"嗨，本文案來自第一個原生頁面，將在Flutter頁面看到我\"}"];
//設定模態跳轉滿屏顯示
self.flutterViewController.modalPresentationStyle = UIModalPresentationFullScreen;
[self presentViewController:self.flutterViewController animated:YES completion:nil];複製程式碼

//初始化FlutterEngine
FlutterEngine *flutterEngine = [[FlutterEngine alloc]initWithName:@"FirstFlutterViewController"];
//指定路由開啟某一頁面，Flutter1.12版本指定路由後在Flutter程式碼裡獲取的路由統一為“/”,為Flutter bug
[[flutterEngine navigationChannel] invokeMethod:@"setInitialRoute" arguments:@"route1?{\"message\":\"嗨，本文案來自第一個原生頁面，將在Flutter頁面看到我\"}"];
//路由的指定需要在FlutterEngine run方法之前，run方法之後指定路由不管用
[flutterEngine run];
//使用FlutterEngine初始化FlutterViewController
self.flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
//設定模態跳轉滿屏顯示
self.flutterViewController.modalPresentationStyle = UIModalPresentationFullScreen;
[self presentViewController:self.flutterViewController animated:YES completion:nil];複製程式碼

void main() => runApp(_widgetForRoute(window.defaultRouteName));
Widget _widgetForRoute(String url) {
  // route名稱
  String route =  url.indexOf('?') == -1 ? url : url.substring(0, url.indexOf('?'));
// 引數Json字串
  String paramsJson =  url.indexOf('?') == -1 ? '{}' : url.substring(url.indexOf('?') + 1);
  Map<String, dynamic> mapJson = json.decode(paramsJson);  String message = mapJson["message"];
// 解析引數
  switch (route) {
    case 'route1':
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter頁面'),
          ),
          body: Center(child: Text('頁面名字: $route',style: TextStyle(color: Colors.red), textDirection: TextDirection.ltr),),
        ),
      );
    default:
      return Center(
        child: Text('Unknown route: $route',style: TextStyle(color: Colors.red), textDirection: TextDirection.ltr),
      );
  }}複製程式碼

• MethodChannel：用於最常見的方法傳遞，幫助Flutter和原生平臺互相呼叫方法，也是本次我們著重介紹的。
  
• BasicMessageChannel：用於資料資訊的傳遞。
  
• EventChannel：用於事件監聽傳遞等場景。

在上面的介紹中，我們可以在一個iOS頁面中開啟Flutter頁面，那接下來我們只需要通過MethodChannel對Flutter傳送命令，以及接收訊息的回撥。那麼我們就可以在iOS或Flutter頁面呈現一些對方傳過來的資料。開整！

iOS部分程式碼如下(下面的程式碼依舊在FirstNativeViewController中編寫)：

我們在開始使用MethodChannel時，先對其進行唯一性定義。注意：這裡我們定義兩個MethodChannel，一個用於對Flutter的訊息傳送，一個用於Flutter的回撥訊息接收。

//Flutter向Native發訊息static NSString *CHANNEL_NATIVE = @"com.example.flutter/native";
//Native向Flutter發訊息static NSString *CHANNEL_FLUTTER = @"com.example.flutter/flutter";複製程式碼

//初始化messageChannel，CHANNEL_NATIVE為iOS和Flutter兩端統一的通訊訊號
FlutterMethodChannel *messageChannel = [FlutterMethodChannel methodChannelWithName:CHANNEL_NATIVE binaryMessenger:self.flutterViewController.binaryMessenger];
//接受Flutter回撥
[messageChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        __strong __typeof(weakSelf) strongSelf = weakSelf;
        if ([call.method isEqualToString:@"openSecondNative"]) {
            //開啟第二個原生頁面
            NSLog(@"開啟第二個原生頁面");
            strongSelf.sMessageFromFlutter = call.arguments[@"message"];
            [strongSelf pushSecondNative];
            //告訴Flutter我們的處理結果
            if (result) {
                result(@"成功開啟第二個原生頁面");
            }
        }
        else if ([call.method isEqualToString:@"backFirstNative"]){
            //返回第一個原生頁面
            NSLog(@"返回第一個原生頁面");
            [strongSelf backFirstNative];
            strongSelf.lblTitle.text = call.arguments[@"message"];
            //告訴Flutter我們的處理結果
            if (result) {
                result(@"成功返回第一個原生頁面");
            }
        }
    }];
複製程式碼

//開啟第二個原生頁面
- (void)pushSecondNative{
    SecondNativeViewController *secondNativeVC = [[SecondNativeViewController alloc]initWithNibName:@"SecondNativeViewController" bundle:nil];
    secondNativeVC.showMessage = self.sMessageFromFlutter;
    __weak __typeof(self) weakSelf = self;
    //第二個原生頁面的block回撥
    secondNativeVC.ReturnStrBlock = ^(NSString *message){
        __strong __typeof(weakSelf) strongSelf = weakSelf;
        //從第二個原生頁面回來後通知Flutter頁面更新文案
        [strongSelf sendMessageToFlutter:message];
    };
    secondNativeVC.modalPresentationStyle = UIModalPresentationFullScreen;
    //進行本操作時，當前螢幕的s控制器為FlutterViewController，所以應該使用self.flutterViewController進行跳轉
    [self.flutterViewController presentViewController:secondNativeVC animated:YES completion:nil];
}
複製程式碼

- (void)backFirstNative{
    //關閉Flutter頁面
    [self.flutterViewController dismissViewControllerAnimated: YES completion: nil];
}複製程式碼

注意：例子中iOS涉及ViewController之間回撥統一使用block來處理（例如：ReturnStrBlock）。

iOS給Flutter發訊息

給Flutter發訊息同樣得先初始化一個MethodChannel，且用之前定義好的名字CHANNEL_FLUTTER。使用MethodChannel的方法invokeMethod就可以將本次的訊息傳送到Flutter中去啦！

- (void)sendMessageToFlutter:(NSString *)message{
    //初始化messageChannel，CHANNEL_FLUTTER為iOS和Flutter兩端統一的通訊訊號
    FlutterMethodChannel *messageChannel = [FlutterMethodChannel methodChannelWithName:CHANNEL_FLUTTER binaryMessenger:self.flutterViewController.binaryMessenger];
    [messageChannel invokeMethod:@"onActivityResult" arguments:@{@"message":message}];}複製程式碼

上面介紹了互動時iOS端的程式碼，下面介紹Flutter端的程式碼。如下：

class ContentWidget extends StatefulWidget{
  ContentWidget({Key key, this.route,this.message}) : super(key: key);
  String route,message;
  _ContentWidgetState createState() => new _ContentWidgetState();
}
class _ContentWidgetState extends State<ContentWidget>{
  static const nativeChannel = const MethodChannel('com.example.flutter/native');
  static const flutterChannel = const MethodChannel('com.example.flutter/flutter');
  void onDataChange(val) {
    setState(() {
      widget.message = val;
    });
  }
  @override
  void initState(){
    super.initState();
    Future<dynamic> handler(MethodCall call) async{
      switch (call.method){
        case 'onActivityResult':
          onDataChange(call.arguments['message']);
          print('1234'+call.arguments['message']);
          break;
      }
    }
    flutterChannel.setMethodCallHandler(handler);
  }
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Stack(
        children: <Widget>[
          Positioned(
            top: 100,
            left: 0,
            right: 0,
            height: 100,
            child: Text(widget.message,textAlign: TextAlign.center,),
          ),
          Positioned(
            top: 300,
            left: 100,
            right: 100,
            height: 100,
            child: RaisedButton(
                child: Text('開啟上一個原生頁面'),
                onPressed: (){
                  returnLastNativePage(nativeChannel);
                }
            ),
          ),
          Positioned(
            top: 430,
            left: 100,
            right: 100,
            height: 100,
            child: RaisedButton(
                child: Text('開啟下一個原生頁面'),
                onPressed: (){
                  openNextNativePage(nativeChannel);
                }
            ),
          )
        ],
      ),
    );
  }}複製程式碼

上面的程式碼缺少了方法：returnLastNativePage、openNextNativePage。如下：

大家肯定還記得我們之前在iOS頁面接收Flutter的回撥後，還能呼叫result這個block來告訴Flutter頁面我們的處理結果。沒錯，我們在下面兩個方法中，非同步獲取這些回撥的資訊並列印。

Future<Null> returnLastNativePage(MethodChannel channel) async{
  Map<String, dynamic> para = {'message':'嗨，本文案來自Flutter頁面，回到第一個原生頁面將看到我'};
  final String result = await channel.invokeMethod('backFirstNative',para);
  print('這是在flutter中列印的'+ result);
}複製程式碼

Future<Null> openNextNativePage(MethodChannel channel) async{
  Map<String, dynamic> para = {'message':'嗨，本文案來自Flutter頁面，開啟第二個原生頁面將看到我'};
  final String result = await channel.invokeMethod('openSecondNative',para);
  print('這是在flutter中列印的'+ result);
}複製程式碼

注意：在你變更Flutter檔案內容後，記得重新執行上面介紹的指令碼檔案build_file.sh，並切到ios_app資料夾目錄下重新pod install一下更新Pod庫哦。

上面的嘗試都是基於Flutter1.12版本實現，若您的Flutter版本 < 1.12，請先更新Flutter版本。

-----------------------------------完整程式碼地址------------------------------------------------

功能程式碼地址：

https://github.com/JJwow/iOS_Flutter_MixBuilder.git複製程式碼

Pod庫地址：

https://github.com/JJwow/flutter_lib.git複製程式碼