目前對(duì)于Flutter開發(fā)來(lái)說(shuō)十办，主要的場(chǎng)景還是Native和Flutter混合開發(fā)的模式，而如何正確的在Native中集成Flutter則是我們的第一步揩局。
現(xiàn)在網(wǎng)上關(guān)于Flutter集成的文章還是很多的，但是大多數(shù)還是不夠詳細(xì)，而且同樣的方式去集成的話沒辦法集成成功残腌。在這里主要分享一下自己的集成經(jīng)驗(yàn)。
嘗試的幾種集成方式：
1、手動(dòng)集成抛猫，手動(dòng)去進(jìn)行每一步的環(huán)境配置
2蟆盹、參考閑魚的集成方案，使用開源組件Flutter-boot集成
3闺金、使用cocoapods集成
對(duì)于前兩種方式逾滥，目前沒有能成功的去配置好集成的環(huán)境（可能是姿勢(shì)不對(duì)吧～）。而第三種方式败匹，雖然也經(jīng)歷了一點(diǎn)小波折寨昙，但是最后還是成功的集成了開發(fā)環(huán)境。下面會(huì)對(duì)前兩種失敗的經(jīng)歷做一個(gè)簡(jiǎn)要描述哎壳，接著會(huì)著重介紹下第三種方式的集成過(guò)程毅待。
1、手動(dòng)集成归榕，手動(dòng)去進(jìn)行每一步的環(huán)境配置（目前不能支持插件生效）：
1）引入Flutter Module模塊
打開終端尸红，進(jìn)入項(xiàng)目“Flutter_Code”的根目錄，執(zhí)行以下命令
cd Flutter_Code
flutter create -t module flutter_app
完成后刹泄，會(huì)生成名為flutter_app的文件夾外里，其和ios、android項(xiàng)目同級(jí)
2）創(chuàng)建依賴配置文件
打開iOS工程特石，在工程目錄下新建文件夾（此文件夾的位置沒有要求）盅蝗，用以保存配置文件，根據(jù)官網(wǎng)姆蘸，需要?jiǎng)?chuàng)建三個(gè)配置文件：Flutter.xcconfig墩莫、Debug.xcconfig、Release.xcconfig逞敷。如圖：
在Flutter.xcconfig中填寫：
//這里填寫建立的flutter module 的 Generated.xcconfig的路徑狂秦，添加flutter的依賴關(guān)系
#include "../flutter_module/.ios/Flutter/Generated.xcconfig"
ENABLE_BITCODE=NO
在Debug.xcconfig中填寫：
#include "Flutter.xcconfig"
在Release.xcconfig中填寫：
#include "Flutter.xcconfig"
FLUTTER_BUILD_MODE=release
Ps：如果工程中用cocopods管理，則需要在Debug.xcconfig推捐、Release.xcconfig中添加pod的路徑
準(zhǔn)備好上述xcconfig文件后裂问，需要到PROJECT中的Configurations中設(shè)置相關(guān)配置，將對(duì)應(yīng)的targer設(shè)置成前面生成的xcconfig文件牛柒，Debug選擇Debug.xcconfig堪簿，Release用Release.xcconfig。如圖：
Ps：在進(jìn)行打包時(shí)皮壁，無(wú)論是Debug還是Release椭更，都需要切換到Release.xcconfig，否則會(huì)報(bào)錯(cuò)
3）為編譯Dart引入相關(guān)腳本
在工程的Build Phase中新建一個(gè)Script Phase蛾魄，用于運(yùn)行Flutter腳本
新建Run Script Phase后甜孤，名字改為了“Flutter load”协饲，需要移動(dòng)其位置，需要在Dependencies之后（如上圖）缴川，如果用cocoapods管理工程茉稠，則需要在Check Pod項(xiàng)目后。
在”Flutter load”里把夸，在腳本框內(nèi)而线，需要寫入以下代碼，用于加載Flutter的xcode_backend腳本：
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
4）修改Flutter SDK腳本：
這一步至關(guān)重要恋日，因?yàn)槊看涡薷膍ain.dart文件后膀篮，都需要Command+B后才能生效，而進(jìn)行Command+B后會(huì)生成岂膳、更新App.framework誓竿、engine、flutter_assets文件谈截，所以這三個(gè)文件的依賴關(guān)系一定要添加正確筷屡，而且要保證每次編譯工程時(shí)，所依賴的這三個(gè)文件都能即時(shí)更新簸喂。
4.1）默認(rèn)情況下Xcode Run Script編譯好的Framework并不在項(xiàng)目中毙死，而在我們創(chuàng)建的flutter module文件夾下（一般路徑是./ios/Flutter/）
4.2）而在Flutter腳本代碼中有判斷，文件生成的目錄喻鳄，需要注釋掉相應(yīng)的代碼才能讓其生成在當(dāng)前的目錄中
4.3）終端執(zhí)行命令：
open $FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh
4.4）打開Flutter腳本后扼倘，注釋掉以下代碼：
5）生成、添加Framework
完成上述配置后除呵，使用Xcode編譯工程(Command+B)再菊，編譯成功后，會(huì)在iOS工程文件夾中生成一個(gè)Flutter文件夾颜曾。
項(xiàng)目中添加Flutter文件的依賴纠拔。進(jìn)入項(xiàng)目目錄，選擇Add Files to ‘xxx’依次去添加App.framework泛啸、engine、flutter_assets三個(gè)內(nèi)容秃症，
（注意：下述圖中第2步候址，“.ios”是隱藏文件，可以使用快捷鍵“Command+Shift+.”來(lái)使之顯示）
其中种柑，添加App.framework岗仑、engine兩項(xiàng)內(nèi)容時(shí)，需要選擇“Copy Items If needed”聚请、“Create groups”
第三項(xiàng)荠雕，flutter_assets添加是稳其，需要選擇“Copy Items If needed”、“Create folder references”
上述操作完成后炸卑，文件夾目錄是這樣的既鞠，注意：flutter_assets是藍(lán)色文件，engine是黃色文件
然后盖文，添加App.framework嘱蛋、Flutter.framework。
注意：添加成功后將Embed選擇為“Embed & Sign”五续，否則啟動(dòng)程序會(huì)崩潰洒敏。
6）修改Generated.xcconfig文件路徑：
一般自動(dòng)生成的Generated.xcconfig中的路徑都是絕對(duì)路徑，如果更改項(xiàng)目名稱或位置疙驾，會(huì)找不到依賴的Flutter文件而導(dǎo)致編譯失敗凶伙。
解決方法：
將劃紅線部分的路徑替換為”../”，表示在flutter_module上一級(jí)的文件夾中查找對(duì)應(yīng)的路徑它碎，如圖：
接下來(lái)就是在AppDeleaget.h函荣、.m中添加相應(yīng)的代碼即可正常編譯使用。
注意：通過(guò)這種方式集成后链韭，去使用Flutter的插件時(shí)（如image_picker）偏竟，插件無(wú)法生效。這是因?yàn)椴寮枰肎eneratedPluginRegistrant文件敞峭，而目前這種方式并沒有去引用踊谋，所以插件無(wú)法生效。
擴(kuò)展：可以嘗試通過(guò)cocoapod的方式旋讹，將flutter module中的GeneratedPluginRegistrant文件進(jìn)行打包成framework殖蚕，然后引用到Native項(xiàng)目中，這樣的話這種集成方式也可以使用沉迹。
最后這一步具體如何去做睦疫，這里就不再去分析了，大家有興趣的話可以在研究一下鞭呕。
原文參考鏈接：http://www.reibang.com/p/10237bf13789
2蛤育、參考閑魚的集成方案，使用開源組件Flutter-boot集成（目前通過(guò)官網(wǎng)的操作步驟集成后無(wú)法使用）
1）下載和使用工具flutter-boot
開源地址：https://github.com/alibaba-flutter/flutter-boot
下載安裝flutter-boot必須使用npm（前端的包管理工具）葫松，常使用brew去下載瓦糕，結(jié)果不行～
使用npm的過(guò)程中可能會(huì)報(bào)錯(cuò)，大家可以自行百度腋么，一般情況下重新對(duì)npm進(jìn)行更新咕娄、啟動(dòng)等操作后就OK了。
若是還無(wú)法正常安裝flutter-boot珊擂，可以嘗試在命令前加上sudo命令：
sudo npm install -g flutter-boot
2）下載成功后圣勒，通過(guò)flutter-boot去集成環(huán)境
一般情況下费变，我們直接通過(guò)終端進(jìn)入項(xiàng)目的根目錄，如這里的"Flutter_Native_0328"圣贸，里邊包含了ios挚歧、android項(xiàng)目。
此時(shí)旁趟，在終端輸入以下命令：
flutter-boot init
終端會(huì)提示輸入flutter工程名稱昼激，我們這里直接輸入"app"（經(jīng)過(guò)各種嘗試，之后將flutter module命名為“app”時(shí)锡搜，才不會(huì)報(bào)錯(cuò)橙困，可能和集成工具內(nèi)部的命名有關(guān)吧）
接著會(huì)提示輸入關(guān)聯(lián)的iOS工程等，其他的按照提示操作即可耕餐，完成后目錄結(jié)構(gòu)如圖凡傅，多出了名稱為app的flutter module
接下來(lái)的其他步驟按照官網(wǎng)知道即可。
但是我通過(guò)官網(wǎng)的知道去操作后肠缔，發(fā)現(xiàn)最終的Native項(xiàng)目（即ios項(xiàng)目）并沒有和flutter關(guān)聯(lián)起來(lái)夏跷，再下去就沒法進(jìn)行了，進(jìn)行了各種資料的查找明未、各種嘗試槽华、或者在開源社區(qū)中求助，都未能能到有效的回應(yīng)趟妥，暫時(shí)擱淺了......
不知道是不是中間哪里的操作姿勢(shì)不對(duì)猫态，有興趣的可以在研究一下flutter-boot該怎么才能正確使用。
3披摄、使用cocoapods集成
1）引入Flutter module模塊
打開終端亲雪，進(jìn)入項(xiàng)目“Flutter_Native_Mix_0330”的根目錄，執(zhí)行以下命令
cd?Flutter_Native_Mix_0330
flutter create -t module flutter_module
完成后，會(huì)生成名為flutter_app的文件夾，其和ios撑教、android項(xiàng)目同級(jí)
2）使用cocoapods
2.1）若當(dāng)前項(xiàng)目中未使用cocoapods，則先進(jìn)行安裝https://cocoapods.org（若已安裝系馆，則跳過(guò)）
如果下載cocoapods失敗，排查是不是“gem”工具的問(wèn)題，一般都是簡(jiǎn)單的問(wèn)題，可以自行百度解決
我目前使用的cocoapods版本為1.9.1基显，而Flutter SDK版本是1.12
2.2）若項(xiàng)目未使用cocoapods，則進(jìn)行初始化（若已使用喳张，則跳過(guò)）
進(jìn)入ios項(xiàng)目文件夾续镇，執(zhí)行命令
pod init
完成后美澳，會(huì)在ios項(xiàng)目文件夾下生成一個(gè)Podfile的文件销部。
2.3）接著摸航，打開 Podfile 這個(gè)文件，添加以下代碼
flutter_application_path = '../flutter_module/'
load File.join(flutter_application_path,'.ios','Flutter','podhelper.rb')
注意：這段代碼得寫到文件的頂部舅桩。這里使用相對(duì)路徑酱虎，不要寫絕對(duì)路徑
例如，我的Podfile文件是這樣的：
添加完成后擂涛，在終端輸入以下命令：
pod install
如圖：
會(huì)直接將Flutter的相關(guān)依賴和庫(kù)的添加到iOS項(xiàng)目中读串。
2.4）接下來(lái)，打開ios項(xiàng)目撒妈，直接Command+B編譯代碼恢暖。
若當(dāng)前沒有導(dǎo)入插件，則直接編譯成功狰右。
若當(dāng)前引入了插件杰捂，并使用GeneratedPluginRegistrant初始化插件，編譯后棋蚌，發(fā)現(xiàn)報(bào)錯(cuò)了嫁佳，如下：
這是因?yàn)槭褂胏ocoapods導(dǎo)入了Flutter相關(guān)的庫(kù)，需要在Build Setting->Linking->Other Linker Flags谷暮，添加 $(inherited)
這時(shí)候蒿往，能夠看到，將Flutter相關(guān)的庫(kù)導(dǎo)入了進(jìn)來(lái)湿弦，插件也導(dǎo)入了瓤漏。
此時(shí)，在編譯工程省撑，發(fā)現(xiàn)可以成功運(yùn)行了赌蔑。
3）添加新的插件
3.1）添加新的插件時(shí)，在pubspec.yaml中添加依賴后竟秫，進(jìn)入flutter_module目錄娃惯，在終端執(zhí)行：
flutter pub get
會(huì)將插件下載下來(lái)，但是還不能立即使用肥败。需要進(jìn)入ios項(xiàng)目目錄趾浅，終端輸入命令：
pod install
執(zhí)行這個(gè)命令，相當(dāng)于更新了ios項(xiàng)目和flutter項(xiàng)目的依賴關(guān)系（新的插件引用）馒稍。更新過(guò)后皿哨，編譯ios項(xiàng)目，新的插件就可以使用了纽谒。
ps：對(duì)于這種混合項(xiàng)目证膨，建議使用flutter-boost插件來(lái)開發(fā)，這個(gè)插件是閑魚的開源組件鼓黔，會(huì)解決混合開發(fā)中遇到的大部分問(wèn)題央勒，很方便
4）項(xiàng)目路徑修改為相對(duì)路徑
若是多人開發(fā)時(shí)不见，或者自己重新拉取代碼時(shí)，會(huì)重新命名本地項(xiàng)目文件夾名稱崔步，此時(shí)編譯iOS項(xiàng)目會(huì)報(bào)錯(cuò)稳吮，如圖：
從這個(gè)錯(cuò)誤可以看出來(lái)，我們?cè)诩傻臅r(shí)候井濒，一些編譯路徑自動(dòng)編譯為了絕對(duì)路徑灶似，我們根據(jù)報(bào)錯(cuò)的信息，找到了是在編譯以下腳本文件時(shí)瑞你，報(bào)錯(cuò)了酪惭，如圖：
我們根據(jù)路徑找到對(duì)應(yīng)的腳本文件后，打開發(fā)現(xiàn)“FLUTTER_APPLICATION_PATH”被定義為了絕對(duì)路徑者甲，如圖：
其項(xiàng)目名稱和路徑是寫死的撞蚕，因此我們把這里的路徑改為相對(duì)路徑即可，如下：
"FLUTTER_APPLICATION_PATH=../flutter_module"
除此之外过牙，我們還需要把這個(gè)路徑下“../flutter_module/.ios/Flutter/Generated.xcconfig”甥厦，Generated.xcconfig文件中的絕對(duì)路徑修改為相對(duì)路徑。
至此寇钉，我們可以隨意命名項(xiàng)目文件夾刀疙，程序都可以正常編譯。
研究了許久集成完后扫倡，就大功告成了谦秧。
4、使用Xcode集成Flutter的Framework
除了上面的方法撵溃，你也可以創(chuàng)建必備的 frameworks疚鲤，手動(dòng)修改既有 Xcode 項(xiàng)目，將他們集成進(jìn)去缘挑。當(dāng)你組內(nèi)其它成員們不能在本地安裝 Flutter SDK 和 CocoaPods集歇，或者你不想使用 CocoaPods 作為既有應(yīng)用的依賴管理時(shí)，這種方法會(huì)比較合適语淘。但是每當(dāng)你在 Flutter module 中改變了代碼诲宇，都必須運(yùn)行 以下終端代碼
首先，在已經(jīng)創(chuàng)建了flutter_module的前提下惶翻，我們?cè)趇os的項(xiàng)目文件夾內(nèi)新建文件夾Flutter姑蓝，主要用來(lái)保存Flutter相關(guān)的framework。
接著吕粗，在終端執(zhí)行以下命令：
cd flutter_module
flutter build ios-framework --output=/yourPath/ios/Flutter/
參考鏈接：https://flutter.cn/docs/development/add-to-app/ios/project-setup
https://flutter.cn/docs/development/add-to-app/android/project-setup
