Flutter混合開發(fā)(Add Flutter to existing app)

一阔逼、創(chuàng)建一個(gè)Flutter模塊

cd some/path/
flutter create --template module my_flutter

上述命令讓我們在some/path/my_flutter/目錄下創(chuàng)建了一個(gè)Flutter模塊工程惭嚣，在這個(gè)目錄下系枪，我們可以向在其他Flutter獨(dú)立工程一樣執(zhí)行一些flutter命令俺泣，如：flutter run --debug或flutter build ios茧泪。你也可以在Android Studio/IntelliJ或VS代碼中使用Flutter和Dart插件運(yùn)行這個(gè)模塊工程炼列。此項(xiàng)目包含一個(gè)模塊的單視圖示例版本仑撞，它是一個(gè)被嵌入到現(xiàn)有的app之前的版本赤兴，這有助于你的代碼中的純Flutter部分的增量測試。

二隧哮、模塊項(xiàng)目結(jié)構(gòu)

my_flutter模塊目錄結(jié)構(gòu)和普通的Flutter應(yīng)用程序類似:

my_flutter/
├── .ios/
│   ├── Runner.xcworkspace
│   └── Flutter/podhelper.rb
├── lib/
│   └── main.dart
├── test/
└── pubspec.yaml

將Dart代碼添加到lib/目錄中桶良。

將Flutter dependencies添加到my_flutter/pubspec。包括Flutter packages 和 plugins沮翔。

.ios隱藏文件夾包含一個(gè)Xcode workspace陨帆，在那里你可以獨(dú)立運(yùn)行你的模塊工程。它是一個(gè)用于引導(dǎo)Flutter代碼的包裝器項(xiàng)目采蚀，并包含幫助腳本疲牵，以方便構(gòu)建框架或使用CocoaPods將模塊工程嵌入到現(xiàn)有的應(yīng)用程序中。

注意：將自定義的iOS代碼添加到您現(xiàn)有的應(yīng)用程序項(xiàng)目或插件中搏存，而不是添加到模塊的.iOS /目錄中瑰步。在模塊的.iOS /目錄中所做的更改不會出現(xiàn)在使用該模塊的現(xiàn)有iOS項(xiàng)目中，而是會被Flutter覆蓋璧眠。
不要對.ios/目錄進(jìn)行源代碼控制缩焦，因?yàn)樗亲詣由傻摹Ｔ谛聶C(jī)器上構(gòu)建模塊之前责静，在使用flutter模塊構(gòu)建iOS項(xiàng)目之前袁滥，先在my_flutter目錄下運(yùn)行flutter pub get來重新生成. iOS /目錄。

三灾螃、將Flutter模塊嵌入到現(xiàn)有App的中

有兩種方法可以將Flutter嵌入到現(xiàn)有的App中题翻。

1.app的CocoaPods和本地Flutter SDK。(推薦)腰鬼。
2.全本地管理：將Flutter engine嵌赠、編譯的Dart代碼、Flutter plugins打包生成frameworks熄赡，然后手動嵌入frameworks姜挺，并在Xcode中更新構(gòu)建設(shè)置。

使用Flutter會增加包體積

1彼硫、使用CocoaPods+本地Flutter SDK

每個(gè)開發(fā)人員都有一個(gè)本地安裝的Flutter SDK版本炊豪。簡單地在Xcode中構(gòu)建你的應(yīng)用程序就能自動運(yùn)行腳本嵌入你的Dart和插件代碼凌箕。這種方案能然你只用Xcode就能快速迭代最新的Flutter模塊。

下面的示例假設(shè)您的現(xiàn)有應(yīng)用程序和Flutter模塊位于同級目錄中词渤。如果您有一個(gè)不同的目錄結(jié)構(gòu)牵舱，您可能需要調(diào)整相對路徑。

some/path/
├── my_flutter/
│   └── .ios/
│       └── Flutter/
│         └── podhelper.rb
└── MyApp/
    └── Podfile

1. 給Podfile添加代碼

flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

1. 給每一個(gè)用到Flutter的target添加 install_all_flutter_pods(flutter_application_path)

target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end

1. pod install
  當(dāng)你改變my_flutter/pubspec.yaml文件里面Flutter插件依賴關(guān)系時(shí)缺虐，需要在你的Flutter模塊工程目錄下執(zhí)行flutter pub get刷新由podhelper.rb腳本讀取的插件列表芜壁。然后在原工程目錄some/path/MyApp上再pod install。

podhelper.rb腳本：把你的plugins志笼、Flutter.framework沿盅、App.framework嵌入項(xiàng)目
build configurations：分別嵌入Debug/Release/Profile模式下的Flutter

2把篓、使用frameworks+手動嵌入

生成frameworks纫溃，并通過手動編輯現(xiàn)有的Xcode項(xiàng)目的方式將它們嵌入到App中。

使用場景：您的團(tuán)隊(duì)成員不能在本地安裝Flutter SDK和CocoaPods韧掩，或者不想使用CocoaPods管理紊浩。
缺點(diǎn)：在flutter模塊中，每做一次代碼更改你都必須運(yùn)行一次flutter build ios-framework疗锐。

1.生成frameworks

下面的例子假設(shè)你想生成frameworks到some/path/MyApp/Flutter/目錄坊谁。

flutter build ios-framework --output=some/path/MyApp/Flutter/

some/path/MyApp/
└── Flutter/
    ├── Debug/
    │   ├── Flutter.framework
    │   ├── App.framework
    │   ├── FlutterPluginRegistrant.framework (only if you have plugins with iOS platform code)
    │   └── example_plugin.framework (each plugin is a separate framework)
    ├── Profile/
    │   ├── Flutter.framework
    │   ├── App.framework
    │   ├── FlutterPluginRegistrant.framework
    │   └── example_plugin.framework
    └── Release/
        ├── Flutter.framework
        ├── App.framework
        ├── FlutterPluginRegistrant.framework
        └── example_plugin.framework

注意：import的Flutter.framework 和 App.framework路徑要保持一致，否則會導(dǎo)致runtime crashes（例如Profile/Flutter.framework 和 Debug/App.framework）

Tip:Xcode 11后滑臊，可以通過添加標(biāo)志--xcframework --no-universal來生成XCFrameworks而不是通用框架口芍。

2.將生成的frameworks嵌入并鏈接到Xcode中

鏈接frameworks

1.拖拽some/path/MyApp/Flutter/Release/ 下的frameworks到targets’ build settings > Build Phases > Link Binary With Libraries.
2.在target’s build settings的Framework Search Paths添加$(PROJECT_DIR)/Flutter/Release/

嵌入frameworks

拖拽framework到targets’ build settings > Build Phases > Embed Frameworks，選擇Embed & Sign
動態(tài)庫必須嵌入app以便在runtime時(shí)加載雇卷。Plugins可以生成靜態(tài)或動態(tài)框架鬓椭。靜態(tài)框架應(yīng)該鏈接，而不是嵌入关划。如果你嵌入一個(gè)靜態(tài)框架到你的應(yīng)用程序小染，你的app將不能發(fā)布到App Store，并報(bào)一個(gè)archive error：Found an unexpected Mach-O header code贮折。

Tip：為了適配不同模式裤翩，需要更改：
1.在MyApp.xcodeproj/project.pbxproj里面把path = Flutter/Release/example.framework;改為path = "Flutter/$(CONFIGURATION)/example.framework";

2.在Framework Search Paths添加$(PROJECT_DIR)/Flutter/$(CONFIGURATION)

還可以綜合方案1、2调榄。用CocoaPods管理Flutter踊赠，手動嵌入frameworks。

總結(jié)：混合項(xiàng)目有兩種方式：使用CocoaPods+本地Flutter SDK每庆、使用frameworks+手動嵌入筐带。