前言

Flutter 是一個很有潛力的框架，但是目前使用Flutter的APP并不算很多，相關資料并不豐富，介紹現有工程引入Flutter的相關文章也比較少。項目從零開始，引入Flutter操作比較簡單，但是現有工程引入Flutter 需要費很多精力和時間，這里是我在完成現有iOS工程引入Flutter后寫的一次總結文章。

Flutter 環境搭建

首先是要搭建Flutter環境，之前也寫了一篇相關文章搭建Flutter-iOS開發環境，可以參考一下 可以去官網查看：github.com/flutter/flu… 比較簡單，這里不做贅述。

現有iOS工程引入Flutter

一、建立Flutter module

首先建立flutter module，主要是用于獲取改flutter app中的Generated.xcconfig和framework

cd some/path/ $ flutter create -t module my_flutter 復制代碼

也可以用

flutter create app 復制代碼

建立flutter app，flutter app中也有Generated.xcconfig和framework

二、新建配置文件

根據官網，需要在工程中建立三個配置文件： Flutter.xcconfig 、Debug.xcconfig、Release.xcconfig 在XCode工程對應目錄，右擊，選擇新建文件（New File），選中創建xcconfig文件，如圖：

在Flutter.xcconfig中填寫：

//這里填寫前面建立的flutter module 的Generated.xcconfig的路徑 #include "../../my_flutter/.ios/Flutter/Generated.xcconfig" ENABLE_BITCODE=NO 復制代碼

在 Debug.xcconfig中填寫:

#include "../Flutter/Flutter.xcconfig"復制代碼

在 Release.xcconfig中填寫:

#include "../Flutter/Flutter.xcconfig" FLUTTER_BUILD_MODE=release 復制代碼

如果工程中用cocoapods管理，需要在 Debug.xcconfig和Release.xcconfig添加pod的路徑：

例如 Release.xcconfig中

#include "Flutter.xcconfig" #include "工程路徑/Pods/Target Support Files/******.release.xcconfig"//pod路徑 FLUTTER_BUILD_MODE=release 復制代碼

在準備好這些xcconfig文件后，需要到XCode工程PROJECT（注意是PROJECT,不是Target）中的Configuration選項里，將對應的target選擇成前面的xcconfig文件，Debug用Debug.xcconfig, Release用 Release.xcconfig

注意：進行Archive打包的時候，無論是Debug包還是Release包，需要切換到Release.xcconfig，不然會報錯。

三、為編譯Dart引入相關build phase

在工程的Build Phase中新建一個Run Script,用于編譯時運行腳本， 建立方法如圖：

建立Run Script后，需要移動其對應的位置，需要在Target dependencies之后，如果用cocoapods管理工程需要在，Check Pods Manifest.lock之后：

在腳本框中，填入以下代碼，用于引進Flutter中的xcode_backend腳本：

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build 復制代碼

如圖：

四、生成和添加Framework

完成前面的配置后，便可以在XCode對工程進行編譯build (Command+B)，在提示“ Build Success ” 后，在iOS工程文件夾中會生成一個Flutter文件夾，將其加入工程目錄中,建議和剛才xcconfig所在目錄并列，

右鍵項目目錄 ，選擇 Add Files to 'xxx' ，Options選Create groups，添加編譯生成的Flutter文件夾。需要注意但是：Flutter目錄下有個flutter_assets文件，不能使用Create groups的方式添加，只能用Creat folder references的Options， 否則Flutter頁面會空白渲染不出來。可以刪了flutter_assets在用Creat folder references重新添加。

在添加完Flutter 文件夾之后，去Embeded Binaries中添加App.framework和Flutter.framework

五、AppDelegate改造

Flutter需要和APP進行交互，需要對AppDelegate 進行改造：

AppDelegate.h文件中：

#import <Flutter/Flutter.h>@interface AppDelegate : FlutterAppDelegate <UIApplicationDelegate, FlutterAppLifeCycleProvider>@end 復制代碼

AppDelegate.m 文件中：

#import "AppDelegate.h"@interface AppDelegate ()@end@implementation AppDelegate {FlutterPluginAppLifeCycleDelegate *_lifeCycleDelegate; }- (instancetype)init {if (self = [super init]) {_lifeCycleDelegate = [[FlutterPluginAppLifeCycleDelegate alloc] init];}return self; }- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {return [_lifeCycleDelegate application:application didFinishLaunchingWithOptions:launchOptions]; }- (void)applicationDidEnterBackground:(UIApplication*)application {[_lifeCycleDelegate applicationDidEnterBackground:application]; }- (void)applicationWillEnterForeground:(UIApplication*)application {[_lifeCycleDelegate applicationWillEnterForeground:application]; }- (void)applicationWillResignActive:(UIApplication*)application {[_lifeCycleDelegate applicationWillResignActive:application]; }- (void)applicationDidBecomeActive:(UIApplication*)application {[_lifeCycleDelegate applicationDidBecomeActive:application]; }- (void)applicationWillTerminate:(UIApplication*)application {[_lifeCycleDelegate applicationWillTerminate:application]; }- (void)application:(UIApplication*)application didRegisterUserNotificationSettings:(UIUserNotificationSettings*)notificationSettings {[_lifeCycleDelegate application:application didRegisterUserNotificationSettings:notificationSettings]; }- (void)application:(UIApplication*)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData*)deviceToken {[_lifeCycleDelegate application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; }- (void)application:(UIApplication*)application didReceiveRemoteNotification:(NSDictionary*)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {[_lifeCycleDelegate application:applicationdidReceiveRemoteNotification:userInfofetchCompletionHandler:completionHandler]; }- (BOOL)application:(UIApplication*)applicationopenURL:(NSURL*)urloptions:(NSDictionary<UIApplicationOpenURLOptionsKey, id>*)options {return [_lifeCycleDelegate application:application openURL:url options:options]; } - (BOOL)application:(UIApplication*)application handleOpenURL:(NSURL*)url { return [_lifeCycleDelegate application:application handleOpenURL:url]; } - (BOOL)application:(UIApplication*)application openURL:(NSURL*)url sourceApplication:(NSString*)sourceApplication annotation:(id)annotation { return [_lifeCycleDelegate application:application openURL:url sourceApplication:sourceApplication annotation:annotation]; } - (void)application:(UIApplication*)application performActionForShortcutItem:(UIApplicationShortcutItem*)shortcutItem completionHandler:(void (^)(BOOL succeeded))completionHandler NS_AVAILABLE_IOS(9_0) { [_lifeCycleDelegate application:application performActionForShortcutItem:shortcutItem completionHandler:completionHandler]; } - (void)application:(UIApplication*)application handleEventsForBackgroundURLSession:(nonnull NSString*)identifier completionHandler:(nonnull void (^)(void))completionHandler { [_lifeCycleDelegate application:application handleEventsForBackgroundURLSession:identifier completionHandler:completionHandler]; } - (void)application:(UIApplication*)application performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler { [_lifeCycleDelegate application:application performFetchWithCompletionHandler:completionHandler]; } - (void)addApplicationLifeCycleDelegate:(NSObject<FlutterPlugin>*)delegate { [_lifeCycleDelegate addDelegate:delegate]; } 復制代碼

六、新建FlutterViewController

主要配置基本上已經完成，只要在main.dart實現Flutter的業務代碼即可

在原有工程中 ，建立FlutterViewController來承載main.dart實現的Flutter頁面，如： self.flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];[self.navigationController pushViewController:self.flutterViewController animated:YES]; 復制代碼

后語

到這里現有iOS工程引入Flutter的工作就完成了，一些細節上的修改需要根據場景進行修改，例如Flutter和Native的數據通信等。

轉載于:https://www.cnblogs.com/Free-Thinker/p/10882089.html

總結

以上是生活随笔為你收集整理的Flutter-现有iOS工程引入Flutter的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。