Flutter混合开发(Add Flutter to existing app)

一、创建一个Flutter模块

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

上述命令让我们在some/path/my_flutter/目录下创建了一个Flutter模块工程，在这个目录下，我们可以向在其他Flutter独立工程一样执行一些flutter命令，如：flutter run --debug或flutter build ios。你也可以在Android Studio/IntelliJ或VS代码中使用Flutter和Dart插件运行这个模块工程。此项目包含一个模块的单视图示例版本，它是一个被嵌入到现有的app之前的版本，这有助于你的代码中的纯Flutter部分的增量测试。

二、模块项目结构

my_flutter模块目录结构和普通的Flutter应用程序类似:

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隐藏文件夹包含一个Xcode workspace，在那里你可以独立运行你的模块工程。它是一个用于引导Flutter代码的包装器项目，并包含帮助脚本，以方便构建框架或使用CocoaPods将模块工程嵌入到现有的应用程序中。

注意：将自定义的iOS代码添加到您现有的应用程序项目或插件中，而不是添加到模块的.iOS /目录中。在模块的.iOS /目录中所做的更改不会出现在使用该模块的现有iOS项目中，而是会被Flutter覆盖。
不要对.ios/目录进行源代码控制，因为它是自动生成的。在新机器上构建模块之前，在使用flutter模块构建iOS项目之前，先在my_flutter目录下运行flutter pub get来重新生成. iOS /目录。

三、将Flutter模块嵌入到现有App的中

有两种方法可以将Flutter嵌入到现有的App中。

1.app的CocoaPods和本地Flutter SDK。(推荐)。
2.全本地管理：将Flutter engine、编译的Dart代码、Flutter plugins打包生成frameworks，然后手动嵌入frameworks，并在Xcode中更新构建设置。

使用Flutter会增加包体积

1、使用CocoaPods+本地Flutter SDK

每个开发人员都有一个本地安装的Flutter SDK版本。简单地在Xcode中构建你的应用程序就能自动运行脚本嵌入你的Dart和插件代码。这种方案能然你只用Xcode就能快速迭代最新的Flutter模块。

下面的示例假设您的现有应用程序和Flutter模块位于同级目录中。如果您有一个不同的目录结构，您可能需要调整相对路径。

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. 给每一个用到Flutter的target添加 install_all_flutter_pods(flutter_application_path)

target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end

1. pod install
  当你改变my_flutter/pubspec.yaml文件里面Flutter插件依赖关系时，需要在你的Flutter模块工程目录下执行flutter pub get刷新由podhelper.rb脚本读取的插件列表。然后在原工程目录some/path/MyApp上再pod install。

podhelper.rb脚本：把你的plugins、Flutter.framework、App.framework嵌入项目
build configurations：分别嵌入Debug/Release/Profile模式下的Flutter

2、使用frameworks+手动嵌入

生成frameworks，并通过手动编辑现有的Xcode项目的方式将它们嵌入到App中。

使用场景：您的团队成员不能在本地安装Flutter SDK和CocoaPods，或者不想使用CocoaPods管理。
缺点：在flutter模块中，每做一次代码更改你都必须运行一次flutter build ios-framework。

1.生成frameworks

下面的例子假设你想生成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路径要保持一致，否则会导致runtime crashes（例如Profile/Flutter.framework 和 Debug/App.framework）

Tip:Xcode 11后，可以通过添加标志--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
动态库必须嵌入app以便在runtime时加载。Plugins可以生成静态或动态框架。静态框架应该链接，而不是嵌入。如果你嵌入一个静态框架到你的应用程序，你的app将不能发布到App Store，并报一个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。

总结：混合项目有两种方式：使用CocoaPods+本地Flutter SDK、使用frameworks+手动嵌入。