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

niuniu3發表於2021-03-04

體驗了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呼叫方法，然後獲取結果。

流程入下圖：

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

建立一個名字為SqflitePlugin的FlutterMethodChannel
將這個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;
}

複製程式碼

重要程式碼解釋如下：

FlutterAppDelegate有一個FlutterPluginAppLifeCycleDelegate型別的_lifeCycleDelegate屬性，它的作用是分發App生命週期的改變。它的有一個重要的方法- (void)addDelegate:(NSObject<FlutterApplicationLifeCycleDelegate>*)delegate {}, 就是誰想知道App的生命週期就加進來，它會在App的生命週期發生改變的時候一一通知大家。
FlutterAppDelegate的根檢視為一個FlutterViewController型別的物件flutterRootViewController。
和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有幾個重要的屬性：

_engine 就是FlutterEngine，負責渲染互動等功能
_flutterView 是顯示Flutter App的View
_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];
}
複製程式碼

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

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;
}

複製程式碼

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

如果不特殊指定的話，Flutter APP的執行檔案是位於FLutter目錄下的App.framework中那個命名為App的可執行檔案，也就是說所有的Flutter程式碼都打包成了一個可執行檔案。

2. 指定了圖片的路徑 3. 網路設定，是否允許HTTP請求。

Flutter系列二：探究Flutter App在Android宿主App中的整合
2021-03-08
FlutterAPPAndroid
在原生App中嵌入Flutter
2019-05-22
APPFlutter
直播app系統原始碼，在 Flutter 中更改文字的字型系列
2021-10-20
APP原始碼Flutter
Flutter教程app
2018-07-26
FlutterAPP
Flutter 學習筆記① 第一個 Flutter App
2020-05-28
Flutter筆記APP
Flutter Cupertino Tutorial: How to Build an iOS App That Looks and Feels Native
2022-11-24
FlutterUIiOSAPP
戰疫情——flutter App
2020-02-06
FlutterAPP
理解Flutter Demo App
2021-03-28
FlutterAPP
flutter系列之:在flutter中自定義themes
2023-03-06
Flutter
Flutter: 完成一個圖片APP
2019-06-18
FlutterAPP
Flutter中App的主題和導航
2019-05-05
FlutterAPP
iOS整合 Flutter 混合工程開發一
2020-04-24
iOSFlutter
Flutter學習指南App,一起來玩Flutter吧~
2020-02-04
FlutterAPP
Flutter系列：3.APP基礎設施搭建
2019-01-09
FlutterAPP
直播app開發，在 Flutter 中使 Expanded 中的文字可滾動
2021-10-14
APPFlutter
Flutter #03 將原有的 Flutter app 遷移到 Flutter 2.0
2021-05-17
FlutterAPP
iOS原生專案中整合flutter初試
2021-07-28
iOSFlutter
Flutter混合App實戰
2019-04-08
FlutterAPP
Flutter下載更新 App
2019-07-16
FlutterAPP
Flutter 基於BLoC完整Flutter App專案
2019-01-11
FlutterBloCAPP
Flutter app啟動flutter端原始碼分析
2021-07-09
FlutterAPP原始碼
原生App專案整合flutter混合開發詳細指南
2019-02-21
APPFlutter
在Android原生專案中整合Flutter
2018-07-11
AndroidFlutter
Flutter實戰3 — PC上執行Flutter APP
2019-03-04
FlutterAPP
Flutter實戰3 --- PC上執行Flutter APP
2018-12-21
FlutterAPP
Flutter Scheme 使用(瀏覽器開啟App，App內開啟另一個App)
2020-06-10
FlutterScheme瀏覽器APP
使用 Flutter 開發 macOS App
2018-12-18
FlutterMacAPP
使用 Flutter 模仿美團 App
2018-07-31
FlutterAPP
Flutter 仿攜程旅行 APP
2020-03-08
FlutterAPP
flutter天氣預報APP
2019-06-05
FlutterAPP
Flutter 仿滴滴出行App
2019-02-20
FlutterAPP
iOS - Block探究系列一
2019-04-24
iOSBloC
強大的Flutter App升級功能
2020-03-18
FlutterAPP
用Flutter做APP學習心得：Flutter widget的生命週期
2019-12-30
FlutterAPP
Kotlin + MVP + Flutter ，讓你可以在自己的專案中整合 Flutter 並使用
2018-08-22
KotlinMVPFlutter
Flutter BuildContext 探究
2019-01-18
FlutterUIContext
Flutter - 將 Flutter 整合到現有專案（iOS - Framework篇）
2020-06-10
FlutteriOSFramework
使用Flutter開發一款電影APP
2019-07-19
FlutterAPP

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

Pod

Podfile

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

Generated.xcconfig

2. 引入podhelper.rb檔案

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

.flutter-plugins-dependencies

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

總結:

Plguin

1. 註冊外掛

GeneratedPluginRegistrant

SqflitePlugin

FlutterEngine

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

pubspec.yaml

2. iOS端方法處理並返回值

SqflitePlugin

FlutterAppDelegate

FlutterAppDelegate

FlutterViewController

FlutterViewController

重點來了

FlutterViewController

FlutterDartProject

相關文章

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

2. 引入`podhelper.rb`檔案

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

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