【全手順】Firebase × Flutter をサクッと紐付けよう


<details>
<summary><strong>〜目次〜</strong></summary>
 [1. Firebeseの登録](#1-firebeseの登録)
　 [1-1. アカウント作成](#1-1-アカウント作成)
　 [1-2. Firebaseプロジェクトの追加](#1-2-firebaseプロジェクトの追加)
[2. Flutterプロジェクトの作成](#2-flutterプロジェクトの作成)
[3. iosの紐付け](#3-iosの紐付け)
　 [3-1. Info.plistの作成](#3-1-infoplistの作成)
　 [3-2. iosアプリにFirebaseを追加](#3-2-iosアプリにfirebaseを追加)
　 [3-3. firebase_coreを追加](#3-3-firebase_coreを追加)
[4. Androidの紐付け](#4-androidの紐付け)
　 [4-1. jsonファイルの作成](#4-1-jsonファイルの作成)
　 [4-2. AndroidアプリにFirebaseを追加](#4-2-androidアプリにfirebaseを追加)
[5. 終わりに](#5-終わりに)
</details>

#1. Firebeseの登録
####1-1. アカウント作成
[Firebase公式ページ](https://firebase.google.com/)にアクセスし、[使ってみる]をクリック
Googleアカウントを求められるので、ご自身のアカウントを登録
![スクリーンショット_2021-04-27_15_56_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/d0727996-9bc3-35b8-a02e-d29cbea07782.png)
<br>
####1-2. Firebaseプロジェクトの追加
私の場合いくつかのプロジェクトが既にありますので、画面はご自身のものとは異なります。
![スクリーンショット_2021-04-27_16_03_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/b21ca75a-1740-be0e-dcc9-fe22491b8982.png)
プロジェクト名は、半角英数のみ使用可能
![スクリーンショット_2021-04-27_16_11_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/c53edc14-4460-41ce-e932-f3fe4bb2b7a0.png)
アナリティクスが不要な方は、オフにして下さい。
アナリティクスとは、ユーザーのアクセス経路、数、時間等を確認できるものと思って下さい。![スクリーンショット_2021-04-27_16_20_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/25f1b05b-7006-4fea-151b-3881c86497a0.png)
アナリティクスアカウントの作成をして、各項目を完了させて下さい。![スクリーンショット_2021-04-27_17_01_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/cd86923b-5074-7489-f8cb-5fe206d949d6.png)

<br>

#2. Flutterプロジェクトの作成
Android Studioで新しくプロジェクトを作成して下さい。
![スクリーンショット_2021-04-27_17_13_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/957884d6-8274-2def-7f4e-452829c85b10.png)
今回はApplicationの作成で進めていきます。
![スクリーンショット_2021-04-27_17_16_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/6e21ac94-2e2e-3301-6f30-2d368f101a0e.png)
プロジェクト名は、Firebaseのプロジェクト名と同じにしておくと分かり易いです。
![スクリーンショット_2021-04-27_17_17_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/1f2c4b45-0577-75d2-04a1-0735c6648e15.png)
Package nameは後で紐付けの際に必要になります。
確認できますので、覚えておかなくても大丈夫です。
![スクリーンショット_2021-04-27_17_18_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/d3641abc-2194-73cd-fa51-8b27035610b1.png)
<br>
#3. iosの紐付け
####3-1. Info.plistの作成
Finderから AndroidStudioProject > ios > Runner.xcworkspaceを選択して開きます。
![スクリーンショット_2021-04-27_17_42_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/20bf2a67-dac9-f857-661a-73cfcee73751.png)
xcodeが開くと左上部のRunnerを表示させ、Bundle Identifierをコピー
![スクリーンショット_2021-04-27_17_48_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/11a955d0-f499-a685-2bf4-2bef85506fac.png)
Firebaseの画面に戻り、ペーストしアプリを追加します。
![スクリーンショット_2021-04-27_17_49_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/c373055d-4ff1-214c-8335-5eeb9c183e7d.png)
GoogleService-Info.plistをクリックしてダウンロードを開始
これでplistの作成ができました。
![スクリーンショット_2021-04-27_18_01_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/ca97d267-7fb7-933c-092e-1871bc29e734.png)
<br>
####3-2. iosアプリにFirebaseを追加
plistが作成されているので、FinderからxcodeのRunnerフォルダにドラッグして追加
![スクリーンショット_2021-04-27_18_08_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/63db75ba-236d-9c72-d327-39bf91652372.png)
確認画面が出ますので、チェックボックスを埋めて完了して下さい。
![スクリーンショット_2021-04-27_18_10_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/3c964b29-017d-b016-9489-791b9020348b.png)
Firebaseの画面に戻り[次へ]をクリック
何度か[次へ]を続けて、[コンソールへ戻る]のボタンをクリックしてコンソールに移動します。
<br>
####3-3. firebase_coreを追加
pubsc.yamlを開いて、dependencies: の項目にfirebase_coreを貼り付けます。
![スクリーンショット_2021-10-11_14_14_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/6c71b719-5a0f-9be7-b9ae-828e8df7cb30.png)
これでiosとの連携は終了です。





<br>

#4. Androidの紐付け
####4-1. jsonファイルの作成
コンソールでAndroidのアイコンをクリック
![スクリーンショット_2021-04-27_18_59_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/90b9979b-7562-4625-2dd4-f7fe94b500d8.png)
xcodeに移動して、Android > app > build.gradle(ゾウさん)を開いて下さい。
そこにapplicationIDがあるのでコピー
![スクリーンショット_2021-04-27_19_03_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/2705d816-2f40-a439-6428-dc8bb54efc6b.png)
Firebaseに戻りコピーしたものを、パッケージ名のところにペーストし[アプリを登録]をクリック
![スクリーンショット_2021-04-27_19_12_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/bfb0ff92-6bdd-9180-0628-912bddee1fbe.png)
iosの時はplistでしたが、今回はjsonファイルをダウンロード
![スクリーンショット_2021-04-27_19_19_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/36e5b30d-68f0-8ce9-8f0f-79b227685f94.png)
####4-2. AndroidアプリにFirebaseを追加　
AndroidStudioに移動して、Finderからjsonファイルをドラッグ
ドラッグ先はAndroid直下のappフォルダ
![スクリーンショット_2021-04-27_19_21_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/c8bc1c4a-3a22-01f2-347a-b3d8827536f7.png)
search for referencesにチェックを入れて[Refactor]をクリック
search for referencesにチェックを入れておくと、コードベース全体で特定のコード要素が参照されている場所を検索することができます。
![スクリーンショット_2021-04-27_19_29_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912206/e3342d56-2815-4a45-42b0-04df6b793666.png)
Project画面にGoogle-services.jsonが追加されていることが確認できると思います。
これでFirebaseとFlutter [ios] [Android] の紐付けは完了です。

<br>
#5. 終わりに
最後まで読んで頂きありがとうございました。
まだまだ初学者ですので、もっと良い記述の方法があればご指摘お願い致します！