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

原文:Adding Flutter to iOS

一、创建一个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+手动嵌入。

你可能感兴趣的:(Flutter混合开发(Add Flutter to existing app))