Flutter踩坑日記：接入現有iOS項目
之前搞的Flutter版工具鏈已經弄完了，感興趣的朋友可以圍觀下，Android版本dio庫（v2.0.14）發送網絡請求老是報錯，去官方提了issue還沒回，於是今天搞一下把Flutter模塊接入到已有項目中。
首先Flutter官方已經出了wiki，教大家怎麽接入。懶得看官方原文的可以看看這個簡易版快速集成，先來看看效果。
一、創建Flutter模塊
一般用Flutter或者React Native的團隊大部分原因都是因為需要跨平臺，所以在已有項目目錄的上一級創建Flutter模塊，譬如你的工作目錄在some/path/MyApp，那麽你需要在some/path下執行，這樣Flutter可以單獨交給一個虛擬團隊維護，各自獨立。
$ cd some/path/
$ flutter create -t module my_flutter文件結構如下：
some/path/
? my_flutter/
? ? lib/main.dart
? ? .ios/
? MyApp/
? ? ? MyApp.xcodeproj
? ? ? Podfile
? ? MyApp/
? ? ? AppDelegate.h
? ? ? AppDelegate.m (or swift)二、利用Cocoapods添加依賴
沒用過Cocoapods的童鞋可以google搜一下，之前寫過很多Cocoapods的文章由於博客主機商跑路都沒了，說多了都是淚
1.在Podfile文件加入以下代碼：
flutter_application_path = '../my_flutter/'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)註意my_flutter的路徑，因為我們是以xcodeproj文件的上一級創建的，所以需要加../，這個和React Native引入依賴路徑是一樣的，都需要註意這個問題。
2.執行pod install
註：如果報錯
[!] InvalidPodfilefile: No such file or directory @ rb_sysopen - ./my_flutter/.ios/Flutter/podhelper.rb.
需要在my_flutter文件夾下執行以下flutter run，把.ios和.android等flutter配置生成出來。
3.禁用bitcode，設置環境變量
找到你的target，Build Settings->Build Options->Enable Bitcode設置為NO，另外在Preprocessor Macros添加FLUTTER_BUILD_MODE=Debug和FLUTTER_BUILD_MODE=Release，如果還有其他環境需要根據情況選擇Debug或Release。
4.添加run script
找到你的target，Build Phases -> + -> New Run Script Phase，並且在bash或zsh配置FLUTTER_ROOT，否則打包會出錯找不到flutter。涉及多人開發還需要安裝路徑位置，否則團隊小夥伴每個人的路徑不一樣。
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed註：把這個script放到Target Dependencies phasescript的後面。
5.添加assets資源
官網說需要添加Flutter.framework資源，但是這個Cocoapods已經幫忙引入了，所以就不需要了，如果沒有被引入進去那就手動引入下。這裏只需要添加flutter_assets就行了，記得選Creat folder references引入方式。Flutter 1.0.0版本路徑是my_flutter->build->flutter_assets
6.修改AppDelegate
Objective-C:
AppDelegate.h
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
AppDelegate.m
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins
#include "AppDelegate.h"
@implementation AppDelegate
// This override can be omitted if you do not have any Flutter Plugins.
- (BOOL)application:(UIApplication *)application
? ? didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
? self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
? [self.flutterEngine runWithEntrypoint:nil];
? [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
? return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@endSwift:
AppDelegate.swift
import UIKit
import Flutter
import FlutterPluginRegistrant // Only if you have Flutter Plugins.
@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
? var flutterEngine : FlutterEngine?;
? // Only if you have Flutter plugins.
? override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
? ? self.flutterEngine = FlutterEngine(name: "io.flutter", project: nil);
? ? self.flutterEngine?.run(withEntrypoint: nil);
? ? GeneratedPluginRegistrant.register(with: self.flutterEngine);
? ? return super.application(application, didFinishLaunchingWithOptions: launchOptions);
? }
}到這裏，我們的Flutter就算已經引入工程了
三、跳轉Flutter頁面
Objective-C:
ViewController.m
#import <Flutter/Flutter.h>
#import "AppDelegate.h"
#import "ViewController.h"
@implementation ViewController
- (void)viewDidLoad {
? ? [super viewDidLoad];
? ? UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
? ? [button addTarget:self
? ? ? ? ? ? ? action:@selector(handleButtonAction)
? ? forControlEvents:UIControlEventTouchUpInside];
? ? [button setTitle:@"Press me" forState:UIControlStateNormal];
? ? [button setBackgroundColor:[UIColor blueColor]];
? ? button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
? ? [self.view addSubview:button];
}
- (void)handleButtonAction {
? ? FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
? ? FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
? ? [self presentViewController:flutterViewController animated:false completion:nil];
}
@endSwift:
ViewController.swift
import UIKit
import Flutter
class ViewController: UIViewController {
? override func viewDidLoad() {
? ? super.viewDidLoad()
? ? let button = UIButton(type:UIButtonType.custom)
? ? button.addTarget(self, action: #selector(handleButtonAction), for: .touchUpInside)
? ? button.setTitle("Press me", for: UIControlState.normal)
? ? button.frame = CGRect(x: 80.0, y: 210.0, width: 160.0, height: 40.0)
? ? button.backgroundColor = UIColor.blue
? ? self.view.addSubview(button)
? }
? @objc func handleButtonAction() {
? ? let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.flutterEngine;
? ? let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)!;
? ? self.present(flutterViewController, animated: false, completion: nil)
? }
}剩下的就是寫Flutter頁面邏輯了以及Flutter模塊需要調用Native API（後面專門寫一篇文章）。
寫完Flutter頁面，如果要跳轉到指定頁面使用Flutter的路由就可以了
Objective-C:
[flutterViewController setInitialRoute:@"route1"];Swift:
flutterViewController.setInitialRoute("route1")四、運行
在my_flutter手動flutter run一下，或者直接開啟熱加載，然後就可以在原有的iOS項目中用Xcoderun起來了。
$ flutter attach --isolate-filter='debug'
Waiting for a connection from Flutter...
Done.
Syncing files to device...? ? ? 1.1s
??? To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler is available at: http://127.0.0.1:43343/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
Connected view:
? debug isolate (isolates/642101161)五、發布
執行flutter build ios以創建release版本（flutter build默認為--release）
Flutter踩坑日記：接入現有iOS項目