1. 背景

この記事は Flutter 公式 Web サイトから参照されています: Flutter 公式 Web サイトに入る

Flutter の公式 Web サイトで提供されている方法によると、Flutter を既存の iOS プロジェクトに統合するための 3 つのオプションが提供されています。

1 つ目の方法: Podfile ファイルで Flutter プロジェクトディレクトリを指定します。この方法は、すでに開発中の iOS プロジェクトに比較的使いやすく、変更が少なく、Flutter コーディング後に実装でき、ネイティブプロジェクトを直接実行することで効果を確認できます。

2 番目のタイプ: Flutter プロジェクトをネイティブプロジェクトに導入するためのプラグインとしてパッケージ化するこの方法では、ネイティブプロジェクトと Flutter プロジェクトを分離できますが、デバッグが面倒です。Flutter プロジェクトが更新されるたびに、プラグインにパッケージ化してから、ネイティブプロジェクトの元の依存プラグインを置き換えます。

3 番目の方法: CocoaPods を使用して、Xcode および Flutter プロジェクトにアプリケーションとプラグインフレームワークを埋め込みます。この方法は、Android Studio 開発ツールを使用して新しい Flutter プロジェクトを作成する場合のデフォルトのソリューションです。新しい Flutter プロジェクトが作成された後、それが作成されます。 iOS と Android のネイティブプロジェクトには、ネイティブプロジェクト内に Flutter が埋め込まれたパッケージが含まれますが、この解決策は、すでに開発中のネイティブプロジェクトにとってはさらに面倒です。

次の場合、相関には最初の方法が使用されます。

2. 新しい Flutter プロジェクトを既存の iOS プロジェクトに統合します

1. 新しい Flutter プロジェクトを作成する

//创建一个名字为my_flutter的Flutter工程
flutter create --template module my_flutter

作成されたmy_flutterプロジェクトディレクトリは以下のとおりです。

このうち .ios と .android は隠しファイルで、その内容は Flutter が対応するプラットフォーム向けにコンパイルしたキャッシュコードで、削除後は次回のコンパイル時に再生成されます。

重要: my_flutter プロジェクトの pubspec.yaml ファイルの下部にモジュール属性設定があります。この設定により、Flutter がネイティブプロジェクトとの関連付けにどのメソッドを使用するかが決まります。下図の androidPackage と iosBundleIdentifier のモジュール属性とパッケージ名を設定した後、.ios ディレクトリと .android ディレクトリが自動的に生成されます。設定されていない場合、Flutter は3 番目のオプションはコンパイルです。つまり、.android または .ios ファイル内のコードではなく、Flutter プロジェクト内の android フォルダーおよび ios フォルダー内のコードをコンパイルします。

#注意不要顶格写  
  module:
    androidX: true
    androidPackage: 填写android工程的包名
    iosBundleIdentifier: 填写iOS工程的包名

2. iOS プロジェクトを Flutter プロジェクトに関連付ける

iOS プロジェクトの Podfile ファイルを開き、ファイル内の Flutter ディレクトリを設定します。上記の my_flutter を例として、my_flutter と iOS プロジェクトディレクトリが同じルートディレクトリにあると仮定すると、設定は次のようになります。

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

Flutter と統合する必要がある各 Podfile ターゲットノードの下に、次のコードを追加します。

target 'my_flutter' do
  install_all_flutter_pods(flutter_application_path)
end

Podfile の post_install セクションに、次のコードを追加します。

post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

my_flutter ディレクトリで、同期コマンドを実行します。

 flutter pub get

次に、iOS ネイティブプロジェクトでリモートライブラリのインストールを実行します。

pod install

上記のコードを追加すると、iOS ネイティブプロジェクトが新しく作成された my_futter プロジェクトに関連付けられたことになり、Flutter プロジェクト内のすべてのコーディングを iOS ネイティブプロジェクトで直接実行および表示できるようになります。

3. 既存の iOS プロジェクト内の既存の Flutter プロジェクトに接続します

1. Flutterプロジェクトのpubspec.yamlを変更します。

この方法を使用するには、Flutter プロジェクトの pubspec.yaml ファイルを変更し、pubspec.yaml ファイルを開いて、最後に次の行を追加するだけです。

#注意不要顶格写  
  module:
    androidX: true
    androidPackage: 填写android工程的包名
    iosBundleIdentifier: 填写iOS工程的包名

Flutter プロジェクトをコンパイルすると、Flutter プロジェクトの下に .ios フォルダーが生成されます (.ios は隠しファイルです)。

2. iOS プロジェクトを Flutter プロジェクトに関連付ける

この手順は、上記の「2. 新しい Flutter プロジェクトを既存の iOS プロジェクトに接続する」-「2. iOS プロジェクトを Flutter プロジェクトに関連付ける」の手順と同じなので、上記の手順を参照してください。

既存の iOS プロジェクトで、新しい Flutter プロジェクトまたは既存の Flutter プロジェクトを接続します

1. 背景

2. 新しい Flutter プロジェクトを既存の iOS プロジェクトに統合します

1. 新しい Flutter プロジェクトを作成する

2. iOS プロジェクトを Flutter プロジェクトに関連付ける

3. 既存の iOS プロジェクト内の既存の Flutter プロジェクトに接続します

1. Flutterプロジェクトのpubspec.yamlを変更します。

2. iOS プロジェクトを Flutter プロジェクトに関連付ける

おすすめ