Flutter モジュールを iOS プロジェクトに統合する

コンテンツ

Flutter UI コンポーネントは既存の iOS に段階的に追加できます埋め込みフレームワークとしてのアプリケーション。 Flutterを埋め込む方法はいくつかあります既存のアプリケーションで。

CocoaPods 依存関係マネージャーとインストールされた Flutter SDK を使用します。この場合、flutter_moduleからコンパイルされていますアプリがビルドされるたびにソースが作成されます。（おすすめされた。）
Flutter エンジンのフレームワーク、コンパイルされた Dart コード、およびすべての Flutter プラグイン。ここでは、フレームワークを手動で埋め込みます。 Xcode で既存のアプリケーションのビルド設定を更新します。これは、すべての開発者を必要としたくないチームにとって便利です。 Flutter SDK と Cocoapods をローカルにインストールします。
コンパイルされた Dart コードのフレームワークを作成します。およびすべての Flutter プラグイン。 Flutter エンジンには CocoaPods を使用します。このオプションを使用すると、アプリケーションのフレームワークが埋め込まれます Xcode のプラグインですが、 CocoaPods ポッドスペックとしての Flutter エンジン。これは 2 番目のオプションと似ていますが、次のような特徴があります。大規模な Flutter.xcframework を配布する代替手段です。

UIKit で構築されたアプリを使用する例としては、 iOS ディレクトリを参照してください。add_to_app コードサンプル。 SwiftUI を使用した例については、次の iOS ディレクトリを参照してください。ニュースフィードアプリ。

システム要求

開発環境は次の条件を満たす必要があります。Flutter の macOS システム要件とXcodeがインストールされている。 Flutter は iOS 11 以降をサポートします。さらに、次のものが必要になります。ココアポッドバージョン1.10以降。

Flutterモジュールを作成する

Flutter を既存のアプリケーションに埋め込むには、上記のいずれかの方法を使用して、まずFlutterモジュールを作成します。

コマンドラインから次を実行します。

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

Flutter モジュールプロジェクトは次の場所に作成されます。some/path/my_flutter/。上記の最初の方法を使用している場合は、モジュールは同じ親ディレクトリに作成する必要があります既存の iOS アプリとして。

Flutter モジュールディレクトリから、同じものを実行できます。flutter他の Flutter プロジェクトで使用するコマンド、好きflutter run --debugまたflutter build ios。モジュールを次の場所で実行することもできますAndroid Studio/IntelliJまたVSコードと Flutter プラグインと Dart プラグイン。このプロジェクトには、モジュールのシングルビューサンプルバージョンを作成する前に、既存のアプリケーションに埋め込まれ、これは段階的に役立つものですコードの Flutter のみの部分をテストします。

モジュール構成

のmy_flutterモジュールのディレクトリ構造は次のようになります。通常の Flutter アプリケーション:

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

Dart コードをlib/ディレクトリ。

Flutter の依存関係を追加するmy_flutter/pubspec.yaml、 Flutter パッケージとプラグインが含まれます。

の.ios/隠しサブフォルダーには Xcode ワークスペースが含まれています。モジュールのスタンドアロンバージョンを実行できます。これは、Flutter コードをブートストラップするためのラッパープロジェクトです。フレームワークの構築を容易にするヘルパースクリプトが含まれています。 CocoaPods を使用してモジュールを既存のアプリケーションに埋め込みます。

ノート：カスタム iOS コードを独自の既存アプリケーションに追加するモジュールではなく、プロジェクトまたはプラグインに.ios/ディレクトリ。モジュールに加えられた変更.ios/ディレクトリが既存の iOS プロジェクトに表示されないモジュールを使用しているため、Flutter によって上書きされる可能性があります。

ソース管理を行わないでください。.ios/ディレクトリは自動生成されるため、新しいマシンでモジュールをビルドする前に、次のコマンドを実行します。flutter pub getの中にmy_flutter最初にディレクトリを再生成します.ios/Flutter モジュールを使用して iOS プロジェクトをビルドする前に、ディレクトリを作成します。

Flutter モジュールを既存のアプリケーションに埋め込む

Flutter モジュールを開発したら、ページの上部で説明されている方法を使用して埋め込むことができます。

flutterの使用アプリのサイズが大きくなる。

オプション A - CocoaPods と Flutter SDK を使用して埋め込む

この方法では、開発者全員が作業を行う必要があります。プロジェクトに Flutter SDK のバージョンをローカルにインストールする必要があります。 Flutter モジュールは、アプリがビルドされるたびにソースからコンパイルされます。 Xcode でアプリケーションをビルドするだけで、自動的にスクリプトを実行して、Dart とプラグインのコードを埋め込みます。これにより、最新の状態での迅速な反復が可能になります。追加の実行を行わずに Flutter モジュールのバージョンを変更する Xcode の外部のコマンド。

次の例では、既存のアプリケーションと Flutter モジュールは兄弟関係にありますディレクトリ。ディレクトリ構造が異なる場合は、相対パスの調整が必要になる場合があります。

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

既存のアプリケーション (MyApp）はありませんすでに Podfile がある場合は、実行しますpod initの中に
MyAppディレクトリを作成します。使用方法の詳細を確認できます CocoaPods のCocoaPods スタートガイド。

次の行をPodfile:

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

それぞれについてポッドファイルのターゲットそれは必要です Flutterを埋め込み、呼び出しますinstall_all_flutter_pods(flutter_application_path)。
マイアプリ/ポッドファイル
```
target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end
```
の中にPodfileのpost_installブロックする、電話するflutter_post_install(installer)。
マイアプリ/ポッドファイル
```
post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end
```
ノート：のflutter_post_installメソッド (Flutter 3.1.0 で追加)、ネイティブ Apple Silicon をサポートするためのビルド設定を追加arm64iOSシミュレータ。を含めますif defined?(flutter_post_install)確認してくださいPodfileこのメソッドを持たない古いバージョンの Flutter を実行している場合に有効です。
走るpod install。

ノート：Flutter プラグインの依存関係を変更すると、my_flutter/pubspec.yaml、走るflutter pub getFlutter モジュールディレクトリでリストを更新しますによって読み取られるプラグインの数podhelper.rb脚本。それから、走ってくださいpod installまたまたからあなたのアプリケーションはsome/path/MyApp。

のpodhelper.rbスクリプトにはプラグインが埋め込まれます。Flutter.framework、とApp.frameworkあなたのプロジェクトに。

アプリのデバッグおよびリリースのビルド構成の埋め込みデバッグまたはリリースFlutterのビルドモード、それぞれ。プロファイルのビルド構成を追加するプロファイルモードでテストするためにアプリに追加します。

開けるMyApp.xcworkspaceXcodeで。これで、次を使用してプロジェクトをビルドできます⌘B。

オプション B - Xcode にフレームワークを埋め込む

あるいは、必要なフレームワークを生成することもできます手動で編集してアプリケーションに埋め込みます既存の Xcode プロジェクト。あなたのメンバーがこれを行うかもしれませんチームは Flutter SDK と CocoaPods をローカルにインストールできません。または、CocoaPods を使用したくない場合既存のアプリケーションの依存関係マネージャーとして。走らなければなりませんflutter build ios-frameworkFlutter モジュールでコードを変更するたびに。

次の例では、フレームワークへのsome/path/MyApp/Flutter/。

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

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

生成されたフレームワークを既存のフレームワークにリンクして埋め込みます。 Xcodeでのアプリケーション。方法は複数ありますこれ - プロジェクトに最適な方法を使用してください。

フレームワークに関するリンク

たとえば、フレームワークを次からドラッグできます。some/path/MyApp/Flutter/Release/ファインダー内ターゲットの中に建てる [設定] > [ビルドフェーズ] > [バイナリとライブラリのリンク]。

ターゲットのビルド設定に追加します$(PROJECT_DIR)/Flutter/Release/にフレームワークの検索パス(FRAMEWORK_SEARCH_PATHS）。

ヒント：シミュレーターを使用するには、次のことが必要です。 Flutter フレームワークのデバッグバージョンをビルド構成をデバッグします。これをする使用できます$(PROJECT_DIR)/Flutter/$(CONFIGURATION)の中にフレームワークの検索パス(FRAMEWORK_SEARCH_PATHS) ビルド設定。これにより、リリース構成にリリースフレームワークが埋め込まれます。およびデバッグ構成のデバッグフレームワーク。

こちらも開ける必要がありますMyApp.xcodeproj/project.pbxproj(ファインダーより) そして交換してくださいpath = Flutter/Release/example.xcframework;とpath = "Flutter/$(CONFIGURATION)/example.xcframework";追加されたすべてのフレームワークに適用されます。 (追加されたものに注意してください"。）

フレームワークを埋め込む

生成された動的フレームワークを埋め込む必要があります実行時にロードされるようにアプリに追加します。

フレームワークをリンクすると、フレームワークがフレームワーク、ライブラリ、および埋め込みコンテンツターゲットのセクション全般的設定。動的フレームワークを埋め込むには選択する埋め込みと署名。

それらは以下に表示されますフレームワークを埋め込む内部構築フェーズ次のように：

これで、次を使用して Xcode でプロジェクトをビルドできるようになります。⌘B。

オプション C - Xcode にアプリケーションとプラグインのフレームワークを埋め込み、CocoaPods を使用して Flutter フレームワークを埋め込む

あるいは、大規模な Flutter.xcframework を配布する代わりに、他の開発者、マシン、または継続的統合システムへ、代わりに追加することで、Flutter を CocoaPods podspec として生成できます。旗--cocoapods。これにより、Flutter.podspecエンジン Flutter.xcframework の代わりに。 App.xcframework とプラグインフレームワークが生成されますオプション B で説明されているとおりです。

を生成するには、Flutter.podspecおよびフレームワークを使用するには、次を実行します Flutter モジュールのルートにあるコマンドラインから:

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

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

CocoaPods を使用するホストアプリは、Podfile に Flutter を追加できます。

pod 'Flutter', :podspec => 'some/path/MyApp/Flutter/[build mode]/Flutter.podspec'

生成された App.xcframework をリンクして埋め込みます。 FlutterPluginRegistrant.xcframework、および既存のアプリケーションへのプラグインフレームワークオプション B で説明されているとおりです。

ローカルネットワークのプライバシー権限

iOS 14 以降では、Dart マルチキャスト DNS を有効にします。アプリのデバッグバージョンのサービスたすホットリロードなどのデバッグ機能開発ツール経由flutter attach。

これを行う 1 つの方法は、アプリの Info.plist のコピーを個別に保持することです。ビルド構成。次の手順では、デフォルトデバッグとリリース。アプリのビルド構成に応じて、必要に応じて名前を調整します。

アプリの名前を変更する情報plistに情報-Debug.plist。という名前のコピーを作成します情報リリース.plistそれを Xcode プロジェクトに追加します。
の情報-Debug.plist それだけキーを追加しますNSBonjourServicesそして、文字列を含む配列に値を設定します_dartVmService._tcp。注 Xcode ではこれが「Bonjour サービス」として表示されます。

必要に応じて、キーを追加しますNSLocalNetworkUsageDescriptionに設定します必要に応じてカスタマイズされた権限ダイアログのテキスト。
ターゲットのビルド設定で、Info.plist ファイル(INFOPLIST_FILE) からのパスを設定しますpath/to/Info.plistにpath/to/Info-$(CONFIGURATION).plist。

これはパスに解決されます情報-Debug.plistのデバッグと情報リリース.plistのリリース。

あるいは、明示的に設定することもできます。デバッグへの道情報-Debug.plistそしてそのリリースへの道情報リリース.plist。
もし情報リリース.plistコピーはターゲットにありますビルド設定 > ビルドフェーズ > バンドルのコピーリソース構築フェーズ、削除します。

デバッグアプリによって読み込まれる最初の Flutter 画面で、プロンプトが表示されます。ローカルネットワーク許可用。許可を有効にすることによっても許可できます。[設定] > [プライバシー] > [ローカルネットワーク] > [アプリ]。

アップルシリコン (`arm64`マック）

Apple Silicon (M1) Mac では、ホストアプリはarm64シミュレータ。 Flutter がサポートしている間arm64シミュレーターでは、一部のプラグインはそうでない場合があります。使用する場合これらのプラグインの 1 つでは、次のようなコンパイルエラーが表示される場合があります。未定義のシンボル建築用 arm64そしてあなたは除外しなければなりませんarm64シミュレータからホストアプリのアーキテクチャ。

ホストアプリのターゲットで、除外されるアーキテクチャ(EXCLUDED_ARCHS) ビルド設定。右矢印の開示インジケーターアイコンをクリックして、利用可能なビルド構成を展開します。覆いかぶさるデバッグをクリックし、プラスアイコンをクリックします。変化任意の SDKに任意の iOS シミュレーター SDK。追加arm64ビルド設定値に。

Set conditional EXCLUDED_ARCHS build setting

正しく実行されると、Xcode は追加します。"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;あなたへプロジェクト.pbxprojファイル。

iOS 単体テストのターゲットに対して繰り返します。

発達

いまなら可能です flutter画面を追加する既存のアプリケーションに。