将 Flutter module 集成到 iOS 项目

Flutter can be incrementaly added into your existing iOS application as embeddedframeworks.

System requirements

Your development environment must meet the macOS system requirements for Flutterwith Xcode installed. Flutter supports iOS 8.0 and later.

Create a Flutter module

To embed Flutter into your existing application, first create a Flutter module.

From the command line, run:

  1. cd some/path/
  2. flutter create --template module my_flutter

A Flutter module project is created at some/path/my_flutter/. From thatdirectory, you can run the same flutter commands you wouldin any other Flutter project, like flutter run —debug or flutter build ios.You can also run the module in Android Studio/IntelliJ or VS Code withthe Flutter and Dart plugins.This project contains a single-view example version of your module before it’sembedded in your existing application, which is useful for incrementallytesting the Flutter-only parts of your code.

Module organization

The my_flutter module directory structure is similar to a normal Flutterapplication:

  1. my_flutter/
  2. ├─.ios/
  3. ├─Runner.xcworkspace
  4. └─Flutter/podhelper.rb
  5. ├─lib/
  6. └─main.dart
  7. ├─test/
  8. └─pubspec.yaml

Add your Dart code to the lib/ directory.

Add Flutter dependencies to my_flutter/pubspec.yaml, including Flutter packagesand plugins.

The .ios/ hidden subfolder contains an Xcode workspace where you canrun a standalone version of your module, and contains a wrapper project to bootstrapyour Flutter code. It contains helper scripts to build frameworks, or you can embed the module into your existing application with CocoaPods.

备忘Add custom iOS code to your existing application or a plugin, not tothe module in .ios/. Changes made in .ios/ aren’t embedded in your existing application.Regenerate the directory by running flutter clean or flutter pub get in themy_flutter directory.

Embed the Flutter module in your existing application

There are two ways to embed Flutter in your existing application.

  • Use the CocoaPods dependency manager and installed Flutter SDK. (Recommended.)
  • Create frameworks for the Flutter engine, your compiled Dart code, and allFlutter plugins. Manually embed the frameworks, and update your existingapplication’s build settings in Xcode.

Option A - Embed with CocoaPods and the Flutter SDK

This method requires every developer working on your project to have a locally installedversion of the Flutter SDK. Simply build your application in Xcode to automatically run the script toembed your Dart and plugin code. This allows rapid iteration with the most up-to-dateversion of your Flutter module without running additional commands outside of Xcode.

The following example assumes that your existing application and the Flutter module are in sibling directories.If you have a different directory structure, you may need to adjust the relative paths.

  1. some/path/
  2. ├── my_flutter/
  3. └── .ios/
  4. └── Flutter/
  5. └── podhelper.rb
  6. └── MyApp/
  7. └── Podfile

If your existing application (MyApp) doesn’t already have a Podfile, follow theCocoaPods getting started guide to add a Podfile to your project.

  • Add the following lines to your Podfile:

MyApp/Podfile

  1. flutter_application_path = '../my_flutter'
  2. load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
  • For each Podfile target that needs toembed Flutter, call install_all_flutter_pods(flutter_application_path).

MyApp/Podfile

  1. target 'MyApp' do
  2. install_all_flutter_pods(flutter_application_path)
  3. end
  • Run pod install.

备忘When you change the Flutter plugin dependencies in my_flutter/pubspec.yaml,run flutter pub get in your Flutter module directory to refresh the listof plugins read by the podhelper.rb script. Then, run pod install again fromin your application atsome/path/MyApp.

The podhelper.rb script embeds your plugins, Flutter.framework, andApp.framework into your project.

小提示Flutter.framework is the library for the Flutter engine, and App.framework isthe compiled Dart code for this project.

Open MyApp.xcworkspace in Xcode. You can now build the project using ⌘B.

Option B - Embed frameworks in Xcode

Alternatively, you can generate the necessary frameworks and embed them in your applicationby manually editing your existing Xcode project. You may do this if members of yourteam can’t locally install Flutter SDK and CocoaPods, or if you don’t want to use CocoaPodsas a dependency manager in your existing applications. You must run flutter build ios-frameworkevery time you make code changes in your Flutter module.

If you’re using the previous Embed with CocoaPods and Flutter toolsmethod, you can skip these instructions.

The following example assumes that you want to generate the frameworks to some/path/MyApp/Flutter/.

  1. flutter build ios-framework --output=some/path/MyApp/Flutter/
  1. some/path/MyApp/
  2. └── Flutter/
  3. ├── Debug/
  4. ├── Flutter.framework
  5. ├── App.framework
  6. ├── FlutterPluginRegistrant.framework
  7. └── example_plugin.framework (each plugin with iOS platform code is a separate framework)
  8. ├── Profile/
  9. ├── Flutter.framework
  10. ├── App.framework
  11. ├── FlutterPluginRegistrant.framework
  12. └── example_plugin.framework
  13. └── Release/
  14. ├── Flutter.framework
  15. ├── App.framework
  16. ├── FlutterPluginRegistrant.framework
  17. └── example_plugin.framework

小提示With Xcode 11 installed, you can generate XCFrameworks instead of universal frameworks by addingthe flags —xcframework —no-universal.

Embed the generated frameworks into your existing application in Xcode. For example, you candrag the frameworks from some/path/MyApp/Flutter/Release/ in Finderinto your targets’s build settings > General > Frameworks, Libraries, and Embedded Content. Then, select“Embed & Sign” from the drop-down list.

Embed frameworks in Xcode

There are multiple ways to embed frameworks into an Xcode project—use the method that is best for your project.

You should now be able to build the project in Xcode using ⌘B.

小提示To embed the Debug version of the Flutter frameworks in your Debug build configurationand the Release version in your Release configuration, in your MyApp.xcodeproj/project.pbxproj, tryreplacing path = Flutter/Release/example.framework;with path = "Flutter/$(CONFIGURATION)/example.framework"; for all added frameworks. (Note the added ".)

You must also add $(PROJECT_DIR)/Flutter/$(CONFIGURATION) to your Framework Search Paths build setting.

Development

You can now add a Flutter screen to your existing application.