Flutter系列一：探究Flutter App在iOS宿主App中的整合

體驗了Flutter的專案開發體驗后，肯定會產生眾多的困惑，我第一個想到的問題是，移動端宿主APP是如何將我們撰寫的Flutter代碼整合進去的？

按平臺來，本篇文章先來看看iOS專案如何集成Flutter代碼的，我的代發分析基于此專案，

Pod

我們用Xcode打開iOS專案，主專案里面代碼很少很簡介，

我們第一個想到的肯定是用CocoaPod添加了一些依賴，接下來我們就來看看Podfile這個依賴的組態檔，

Podfile

// 1 檢查環境變數檔案Generated.xcconfig
def flutter_root
  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
  unless File.exist?(generated_xcode_build_settings_path)
    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
  end

  File.foreach(generated_xcode_build_settings_path) do |line|
    matches = line.match(/FLUTTER_ROOT\=(.*)/)
    return matches[1].strip if matches
  end
  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
end

// 2 引入podhelper.rb
require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)

flutter_ios_podfile_setup

target 'Runner' do
  use_frameworks!
  use_modular_headers!

  // 3 執行podhelper.rb 中的 flutter_install_all_ios_pods 方法
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

// 4 執行podhelper.rb 中的flutter_additional_ios_build_settings方法
post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
  end
end

1. 檢查環境變數檔案—Generated.xcconfig

先要確保在iOS專案中的Flutter檔案夾下有Generated.xcconfig這個檔案，Generated.xcconfig這個檔案是定義了一些Flutter和Dart相關的變數，例如FLUTTER_ROOT,FLUTTER_APPLICATION_PATH,FLUTTER_TARGET等，為后續的Pod依賴提供基礎，

Generated.xcconfig

FLUTTER_ROOT= /Users/*/Documents/flutter
FLUTTER_APPLICATION_PATH=/Users/*/Documents/FlutterVideos/feibo_movie/feibo_movie
FLUTTER_TARGET=/Users/chongling.liu/Documents/FlutterVideos/feibo_movie/feibo_movie/lib/main.dart
FLUTTER_BUILD_DIR=build
SYMROOT=${SOURCE_ROOT}/../build/ios
OTHER_LDFLAGS=$(inherited) -framework Flutter
FLUTTER_FRAMEWORK_DIR=/Users/*/Documents/flutter/bin/cache/artifacts/engine/ios
FLUTTER_BUILD_NAME=1.0.0
FLUTTER_BUILD_NUMBER=1
DART_DEFINES=flutter.inspector.structuredErrors%3Dtrue
DART_OBFUSCATION=false
TRACK_WIDGET_CREATION=true
TREE_SHAKE_ICONS=false
PACKAGE_CONFIG=.packages

2. 引入podhelper.rb檔案

podhelper.rb在FLUTTER_ROOT/packages/flutter_tools/bin檔案夾下，檔案中定義了一些Pod相關方法，

3. 執行podhelper.rb 中的 flutter_install_all_ios_pods 方法

• flutter_install_all_ios_pods中呼叫了flutter_install_ios_engine_pod和flutter_install_ios_plugin_pods方法，這兩個方法分別配置Flutter引擎和第三方庫，

def flutter_install_all_ios_pods(ios_application_path = nil)
  flutter_install_ios_engine_pod(ios_application_path)
  flutter_install_ios_plugin_pods(ios_application_path)
end

• flutter_install_ios_engine_pod中主要是將Flutter引擎即Flutter.framework和Flutter.podspec這兩個檔案從FLUTTER_ROOT/bin/cache/artifacts/engine/ios拷貝到iOS專案的Flutter檔案夾下, 然后配置依賴

pod 'Flutter', :path => 'Flutter'

def flutter_install_ios_engine_pod(ios_application_path = nil)
    //省略...
    system('cp', '-r', File.expand_path('Flutter.framework', debug_framework_dir), copied_flutter_dir)
    system('cp', File.expand_path('Flutter.podspec',debug_framework_dir), copied_flutter_dir)
    
    pod 'Flutter', :path => 'Flutter'
end

• flutter_install_ios_plugin_pods是配置Flutter庫依賴的第三方iOS庫或者iOS檔案的依賴的方法，

說起來有點繞，舉個栗子，我們的FLutter代碼中使用了sqflite庫，sqflite在iOS中底層呼叫的的FMDB這個庫，所以需要配置FMDB的依賴，

def flutter_install_ios_plugin_pods(ios_application_path = nil)
  plugins_file = File.join(ios_application_path, '..', '.flutter-plugins-dependencies')
  plugin_pods = flutter_parse_plugins_file(plugins_file)
  plugin_pods.each do |plugin_hash|
    plugin_name = plugin_hash['name']
    plugin_path = plugin_hash['path']
    if (plugin_name && plugin_path)
      symlink = File.join(symlink_plugins_dir, plugin_name)
      File.symlink(plugin_path, symlink)

      pod plugin_name, :path => File.join('.symlinks', 'plugins', plugin_name, 'ios')
    end
  end
end

這個方法的流程是讀取iOS檔案同級目錄下的.flutter-plugins-dependencies檔案, 讀取plugins欄位下的ios陣列，對陣列的每個元素配置依賴，

pod 'sqflite', :path => 'FLUTTER_ROOT/.pub-cache/hosted/pub.dartlang.org/sqflite-1.3.2+3/ios'

.flutter-plugins-dependencies

{
    "plugins":{
        ...
        "ios":[
            {
                "name":"sqflite",
                "path":"/Users/*/Documents/flutter/.pub-cache/hosted/pub.dartlang.org/sqflite-1.3.2+3/",
                "dependencies":[

                ]
            }
            ...
        ]
        
    }
}

4. 執行podhelper.rb中的flutter_additional_ios_build_settings方法

這個就是將ENABLE_BITCODE設定為NO，

總結:

通過一系列的組態檔的讀取，檔案的拷貝等操作，Podfile會將flutter引擎和iOS的依賴庫引入進來，最后的結果接近于：

target 'Runner' do

pod 'Flutter', :path => 'Flutter'
pod 'sqflite', :path => 'FLUTTER_ROOT/.pub-cache/hosted/pub.dartlang.org/sqflite-1.3.2+3/ios'
pod 'sqflite', :path => 'FLUTTER_ROOT/.pub-cache/hosted/pub.dartlang.org/shared_preferences-0.5.12+4/ios'
pod 'sqflite', :path => 'FLUTTER_ROOT/.pub-cache/hosted/pub.dartlang.org/fijkplayer-0.8.7/ios'

end

post_install do |installer|
    installer.pods_project.build_configurations.each do |config|
        config.build_settings['ENABLE_BITCODE'] = 'NO'
    end
end

提示：FMDB并沒有出現在Podfile檔案中，是因為sqflite依賴于FMDB，所以會根據依賴的依賴安裝FMDB，這是CocoaPod基礎知識，iOS開發者應該很熟悉了，就不再這里說明了，

Plguin

APP專案的入口是AppDelegate，繼承自Flutter.framework的FlutterAppDelegate，

@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

1. 注冊插件

AppDelegate在didFinishLaunchingWithOptions里面執行了GeneratedPluginRegistrant.register(with: self)一行代碼，

GeneratedPluginRegistrant

+ (void)registerWithRegistry:(NSObject<FlutterPluginRegistry>*)registry {
  [FijkPlugin registerWithRegistrar:[registry registrarForPlugin:@"FijkPlugin"]];
  [FLTSharedPreferencesPlugin registerWithRegistrar:[registry registrarForPlugin:@"FLTSharedPreferencesPlugin"]];
  [SqflitePlugin registerWithRegistrar:[registry registrarForPlugin:@"SqflitePlugin"]];
  [FLTURLLauncherPlugin registerWithRegistrar:[registry registrarForPlugin:@"FLTURLLauncherPlugin"]];
}

GeneratedPluginRegistrant中的+ (void)registerWithRegistry:(NSObject<FlutterPluginRegistry>*)registry方法實作是執行flutter pub get的時候Flutter自動生成的，當然只有依賴與iOS原生進行互動的Flutter庫才會注冊插件，，

這個檔案也可以手動去編輯，但是一般沒有這個必要，

我們以SqflitePlugin為例介紹Plugin的注冊流程，

SqflitePlugin

+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
    FlutterMethodChannel* channel = [FlutterMethodChannel
                                     methodChannelWithName:_channelName
                                     binaryMessenger:[registrar messenger]];
    SqflitePlugin* instance = [[SqflitePlugin alloc] init];
    [registrar addMethodCallDelegate:instance channel:channel];
}

FlutterMethodChannel是一個通道，Flutter可以通過它向iOS宿主App呼叫方法，然后獲取結果，

流程入下圖：

上面這段代碼代表的含義是：

1. 建立一個名字為SqflitePlugin的FlutterMethodChannel
2. 將這個channel注冊到FLutterEngine中，這樣flutter代碼就可以通過FLutterEngine呼叫這個channel的- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result{}方法，

FlutterEngine

- (void)addMethodCallDelegate:(NSObject<FlutterPlugin>*)delegate
                      channel:(FlutterMethodChannel*)channel {
  [channel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
    [delegate handleMethodCall:call result:result];
  }];
}

2. Flutter端方法的定義和呼叫

sqflite插件的pubspec.yaml檔案中定義了SqflitePlugin這個名字,所以Flutter端的代碼知道通過哪個MethodChannel向iOS代碼發送訊息，這個名字和iOS端是對應的，

pubspec.yaml

flutter:
  plugin:
    platforms:
      android:
        package: com.tekartik.sqflite
        pluginClass: SqflitePlugin
      ios:
        pluginClass: SqflitePlugin
      macos:
        pluginClass: SqflitePlugin

sqflite定義了很多方法，譬如insert方法，這些方法都是異步的，所以回傳值需要用Future包裹，

Future<int> insert(String table, Map<String, dynamic> values,
      {String nullColumnHack, ConflictAlgorithm conflictAlgorithm});

操作資料庫的時候Flutter代碼可以直接呼叫insert方法，這時候FlutterEngine就將引數傳遞給了iOS代碼，等待一步回傳，

2. iOS端方法處理并回傳值

由于在AppDelegate中注冊了對應的插件SqflitePlugin，然后FlutterEngine會呼叫- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result{}方法，

SqflitePlugin

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
    FlutterResult wrappedResult = ^(id res) {
        dispatch_async(dispatch_get_main_queue(), ^{
            result(res);
        });
    };
    
    ...
    else if ([_methodInsert isEqualToString:call.method]) {
        [self handleInsertCall:call result:wrappedResult];
    }
    ...
    else {
        result(FlutterMethodNotImplemented);
    }
}

// 執行插入操作
- (void)handleInsertCall:(FlutterMethodCall*)call result:(FlutterResult)result {
    
    SqfliteDatabase* database = [self getDatabaseOrError:call result:result];
    if (database == nil) {
        return;
    }
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        [database.fmDatabaseQueue inDatabase:^(FMDatabase *db) {
            SqfliteMethodCallOperation* operation = [SqfliteMethodCallOperation newWithCall:call result:result];
            [self insert:database fmdb:db operation:operation];
        }];
    });
    
}

FMDB執行完插入操作后，將結果封裝到FlutterResult中，回傳給Flutter，

FlutterAppDelegate

我們的AppDelegate主要的任務是執行了插件的注冊，讓Flutter代碼可以方便的呼叫Native代碼，

而AppDelegate是繼承自FlutterAppDelegate，那FlutterAppDelegate又做了哪些作業呢？

FlutterAppDelegate在Flutter.framework中，由于是打包成了庫，我們只能看到頭檔案，如果我們需要看原始碼，則需要進入Flutter Engine中去查看源代碼，

FlutterAppDelegate

@implementation FlutterAppDelegate {
  FlutterPluginAppLifeCycleDelegate* _lifeCycleDelegate;
}

// Returns the key window's rootViewController, if it's a FlutterViewController.
// Otherwise, returns nil.
- (FlutterViewController*)rootFlutterViewController {
  if (_rootFlutterViewControllerGetter != nil) {
    return _rootFlutterViewControllerGetter();
  }
  UIViewController* rootViewController = _window.rootViewController;
  if ([rootViewController isKindOfClass:[FlutterViewController class]]) {
    return (FlutterViewController*)rootViewController;
  }
  return nil;
}

#pragma mark - FlutterPluginRegistry methods. All delegating to the rootViewController

- (NSObject<FlutterPluginRegistrar>*)registrarForPlugin:(NSString*)pluginKey {
  FlutterViewController* flutterRootViewController = [self rootFlutterViewController];
  if (flutterRootViewController) {
    return [[flutterRootViewController pluginRegistry] registrarForPlugin:pluginKey];
  }
  return nil;
}

- (BOOL)hasPlugin:(NSString*)pluginKey {
  FlutterViewController* flutterRootViewController = [self rootFlutterViewController];
  if (flutterRootViewController) {
    return [[flutterRootViewController pluginRegistry] hasPlugin:pluginKey];
  }
  return false;
}

- (NSObject*)valuePublishedByPlugin:(NSString*)pluginKey {
  FlutterViewController* flutterRootViewController = [self rootFlutterViewController];
  if (flutterRootViewController) {
    return [[flutterRootViewController pluginRegistry] valuePublishedByPlugin:pluginKey];
  }
  return nil;
}

重要代碼解釋如下：

1. FlutterAppDelegate有一個FlutterPluginAppLifeCycleDelegate型別的_lifeCycleDelegate屬性，它的作用是分發App生命周期的改變，它的有一個重要的方法- (void)addDelegate:(NSObject<FlutterApplicationLifeCycleDelegate>*)delegate {}, 就是誰想知道App的生命周期就加進來，它會在App的生命周期發生改變的時候一一通知大家，

2. FlutterAppDelegate的根視圖為一個FlutterViewController型別的物件flutterRootViewController，

3. 和Plugin相關的一系列代碼，主要是將這些Plugin注冊到flutterRootViewController的FlutterEngine物件上，

這也很好理解MethodChannel是如何在 AppDelegate中連接起來，因為flutterRootViewController加載的就是Flutter App編譯的代碼，

FlutterViewController

前面提到了FlutterAppDelegate的根視圖是FlutterViewController，那這個FlutterViewController是如何去加載Flutter App的呢？

FlutterViewController

@implementation FlutterViewController {
  std::unique_ptr<fml::WeakPtrFactory<FlutterViewController>> _weakFactory;
  fml::scoped_nsobject<FlutterEngine> _engine;

  fml::scoped_nsobject<FlutterView> _flutterView;
  fml::scoped_nsobject<UIView> _splashScreenView;
}

FlutterViewController有幾個重要的屬性：

1. _engine 就是FlutterEngine，負責渲染互動等功能
2. _flutterView 是顯示Flutter App的View
3. _splashScreenView是顯示啟動圖的View

重點來了

FlutterViewController的各種建構式最后都會呼叫
- (void)sharedSetupWithProject:(nullable FlutterDartProject*)project initialRoute:(nullable NSString*)initialRoute

FlutterViewController

- (void)sharedSetupWithProject:(nullable FlutterDartProject*)project
                  initialRoute:(nullable NSString*)initialRoute {
  // Need the project to get settings for the view. Initializing it here means
  if (!project) {
    project = [[[FlutterDartProject alloc] init] autorelease];
  }
  auto engine = fml::scoped_nsobject<FlutterEngine>{[[FlutterEngine alloc]
                initWithName:@"io.flutter"
                     project:project
      allowHeadlessExecution:self.engineAllowHeadlessExecution
          restorationEnabled:[self restorationIdentifier] != nil]};

  _flutterView.reset([[FlutterView alloc] initWithDelegate:_engine opaque:self.isViewOpaque]);
  [_engine.get() createShell:nil libraryURI:nil initialRoute:initialRoute];
  [self loadDefaultSplashScreenView];
  [self performCommonViewControllerInitialization];
}

1. 生成一個FlutterDartProject物件project，這個物件主要是描述了Flutter APP的一些相關資訊，最重要的一個是找到可執行檔案，
2. 根據這個project的設定資訊生成一個FlutterEngine物件engine，
3. 生成一個FlutterView物件_flutterView來作為渲染的View，
4. _engine找到Flutter APP的可執行檔案的入口main.dart開始執行，然后渲染到_flutterView上，
5. 看是否需要加載啟動圖
6. 一些通用的初始化內容

FlutterDartProject

FlutterDartProject中通過FLTDefaultSettingsForBundle方法可以生成一些通用設定，

flutter::Settings FLTDefaultSettingsForBundle(NSBundle* bundle) {
    // Frameworks directory.
    if (settings.application_library_path.size() == 0) {
      NSString* applicationFrameworkPath = [mainBundle pathForResource:@"Frameworks/App.framework"
                                                                ofType:@""];
      if (applicationFrameworkPath.length > 0) {
        NSString*  =
            [NSBundle bundleWithPath:applicationFrameworkPath].executablePath;
        if (executablePath.length > 0) {
          settings.application_library_path.push_back(executablePath.UTF8String);
        }executablePath
      }
    }
  }

  // Checks to see if the flutter assets directory is already present.
  if (settings.assets_path.size() == 0) {
    NSString* assetsName = [FlutterDartProject flutterAssetsName:bundle];
    NSString* assetsPath = [bundle pathForResource:assetsName ofType:@""];

    }
  }

  // Domain network configuration
  NSDictionary* appTransportSecurity =
      [mainBundle objectForInfoDictionaryKey:@"NSAppTransportSecurity"];
  settings.may_insecurely_connect_to_all_domains =
      [FlutterDartProject allowsArbitraryLoads:appTransportSecurity];
  settings.domain_network_policy =
      [FlutterDartProject domainNetworkPolicy:appTransportSecurity].UTF8String;
  }
  return settings;
}

這段代碼主要做了以下一些事情：

1. 如果不特殊指定的話，Flutter APP的執行檔案是位于FLutter目錄下的App.framework中那個命名為App的可執行檔案，也就是說所有的Flutter代碼都打包成了一個可執行檔案，
   
2. 指定了圖片的路徑
3. 網路設定，是否允許HTTP請求，