FlutterでFirebaseを使ってみる〜Firebase導入編（iOS）〜

## 投稿の経緯
FlutterのキャッチアップでFirebaseと連携してFirestoreを使うサンプルプロジェクトを立ち上げました。今回はiOSアプリにFirebaseを導入してエミュレーターでビルドするところまでを書こうと思います。

## 環境
Flutter：2.8.1
MacOS：12.1

## サンプルプロジェクト
GitHubにコードPushしています。気になる方はご覧ください。
![QR_925113.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/f774b418-6fc2-a814-c742-ebf8dde02847.png)

## Firebaseの導入
公式情報を参考にして進めていきます。

https://firebase.google.com/docs/flutter/setup?platform=ios#analytics-not-enabled

#### Firebaseプロジェクトの作成
![a800c466878afb7914d8583967d7d62f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/25e62d44-d6a8-ba78-aa06-e34500417cf9.png)
Firebaseプロジェクトに名前をつけます。今回は`firestore-training`です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/ba0e4900-fef3-7639-146f-7fc308db3feb.png)
今回アナリティクスは無効にしてプロジェクトを作成します。

#### アプリをFirebaseに登録する
![34bf540235dace5e58d24b6a326bb962.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/344f0e5f-b50a-3f09-03ed-ec5bc577b4f4.png)
Firebaseプロジェクトを作成したらコンソールの`iOS+`からアプリをFirebaseに登録しましょう。`Apple バンドル ID`の箇所にアプリのバンドルIDを入力します。
![c9cf688d488f7e9c54598bd1520a3803.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/77ea3b25-b547-3918-019c-c0acef055144.png)
バンドルIDはXcodeから取得します。
![56e0a21452d3aa6ff271734893b373cf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/4da6cfae-c530-320c-8921-7cbabfffda0f.png)
/Flutterプロジェクト/ios/Runner.xcodeproj/を開いて赤丸箇所から取得します。
`アプリのニックネーム`と`App Store ID`は任意なので今回はスキップします。
![412f9ab9352d8d3c11bc19966ada9d34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/2ed64ac2-af6b-ff28-311c-ca169c52491e.png)
続いて`GoogleService-Info.plist`をダウンロードしてファイルをFlutterアプリに追加します。
![347e69a23ccfaf6931f20815ff5461bf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/ae4563a5-5b73-d0fe-c5e3-6da9848c5192.png)
追加場所は画像にあるように`/Flutterプロジェクト/ios/Runner/`ディレクトリです。
続いて`Firebase SDK の追加`と`初期化コードの追加`をスキップしてコンソロールへ進みます。

#### FlutterFireプラグインを追加する
Flutter Fireとは？
>Flutter はプラグインを使用して、Firebase API などの幅広いプラットフォーム固有サービスへのアクセスを提供します。プラグインには、各プラットフォームのサービスと API にアクセスするためのプラットフォーム固有のコードが含まれています。Firebase へのアクセスには、Firebase プロダクト（Realtime Database、Authentication、アナリティクス、Cloud Storage など）ごとに存在するさまざまなライブラリが使用されます。Flutter が提供する Firebase プラグインのセットは、FlutterFire と総称されています。

公式ではこのように書かれています。

エミュレーターとデバイス上でアプリが実行されていないことを確認して`pubspec.yaml`ファイルを開き、FlutterFireプラグインを追加します。今回は`firebase_core`と`cloud_firestore`を追加します。

```pubspec.yaml
# 省略

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.4.0+9
  cloud_firestore: ^0.12.9+5

# 省略
```

これで設定は完了です。

## アプリをビルドする
続いてiOSアプリをビルドしましょう。

```
The plugin `cloud_firestore` uses a deprecated version of the Android embedding.
To avoid unexpected runtime failures, or future build failures, try to see if this plugin supports the Android V2 embedding. Otherwise, consider removing it since a future release of Flutter will remove these deprecated APIs.
If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding: https://flutter.dev/go/android-plugin-migration.
```
ビルドのタイミングでこのようにエラーが発生した場合、`flutter pub upgrade --major-versions`を実行してプラグインをメジャーバージョンへアップデートする必要があります。コマンドを実行すると自動でpubspec.yamlが更新されます。

2022年1月の時点ではfirebase_coreは`1.11.0`、cloud_firestoreは`3.1.6`がメジャーバージョンとして扱われているようです。

アップデートが完了したら`Podfile`を編集します。
編集項目は以下2点。

- platformを9.0から10.6へ変更
- pod FirebaseFirestoreを追加

```
# Uncomment this line to define a global platform for your project
platform :ios, '9.0' <- ここを10.6に編集

 ///// 省略 /////

target 'Runner' do
  use_frameworks!
  use_modular_headers!
  pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '8.10.0' <- ここを追加
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

 ///// 省略 /////
```

この状態でビルドを実行すると成功すると思います。

## おわりに
今回はFlutterプロジェクトのiOSアプリにFirebaseを導入してエミュレーターでビルドするところまでを記事にしました。次回、AndroidアプリとFirebaseを連携する方法も記事にしようと思います。

ご覧いただきありがとうございました。
こうしたほうがいいや、ここはちょっと違うなど気になる箇所があった場合、ご教示いただけると幸いです。

## お知らせ
現在副業でiOSアプリ開発案件を募集しています。

↓活動リンクはこちら↓
https://linktr.ee/sasaki.ken

[Twitter DM](https://twitter.com/ken_sasaki2)でご依頼お待ちしております！
![Twitter_QR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/de273ca6-120d-5727-48b0-7fcdf52eed34.png)