将 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:
cd some/path/
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:
my_flutter/
├─.ios/
│ ├─Runner.xcworkspace
│ └─Flutter/podhelper.rb
├─lib/
│ └─main.dart
├─test/
└─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.
some/path/
├── my_flutter/
│ └── .ios/
│ └── Flutter/
│ └── podhelper.rb
└── MyApp/
└── 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
- flutter_application_path = '../my_flutter'
- 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
- target 'MyApp' do
- install_all_flutter_pods(flutter_application_path)
- 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-framework
every 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/
.
flutter build ios-framework --output=some/path/MyApp/Flutter/
some/path/MyApp/
└── Flutter/
├── Debug/
│ ├── Flutter.framework
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework
│ └── example_plugin.framework (each plugin with iOS platform code is a separate framework)
├── Profile/
│ ├── Flutter.framework
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework
│ └── example_plugin.framework
└── Release/
├── Flutter.framework
├── App.framework
├── FlutterPluginRegistrant.framework
└── 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.
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.