LoginSignup
8
17

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-04-27


〜目次〜
1. Firebeseの登録
  1-1. アカウント作成
  1-2. Firebaseプロジェクトの追加
2. Flutterプロジェクトの作成
3. iosの紐付け
  3-1. Info.plistの作成
  3-2. iosアプリにFirebaseを追加
  3-3. firebase_coreを追加
4. Androidの紐付け
  4-1. jsonファイルの作成
  4-2. AndroidアプリにFirebaseを追加
5. 終わりに

1. Firebeseの登録

1-1. アカウント作成

Firebase公式ページにアクセスし、[使ってみる]をクリック
Googleアカウントを求められるので、ご自身のアカウントを登録
スクリーンショット_2021-04-27_15_56_00.png

1-2. Firebaseプロジェクトの追加

私の場合いくつかのプロジェクトが既にありますので、画面はご自身のものとは異なります。
スクリーンショット_2021-04-27_16_03_04.png
プロジェクト名は、半角英数のみ使用可能
スクリーンショット_2021-04-27_16_11_59.png
アナリティクスが不要な方は、オフにして下さい。
アナリティクスとは、ユーザーのアクセス経路、数、時間等を確認できるものと思って下さい。スクリーンショット_2021-04-27_16_20_49.png
アナリティクスアカウントの作成をして、各項目を完了させて下さい。スクリーンショット_2021-04-27_17_01_10.png


2. Flutterプロジェクトの作成

Android Studioで新しくプロジェクトを作成して下さい。
スクリーンショット_2021-04-27_17_13_42.png
今回はApplicationの作成で進めていきます。
スクリーンショット_2021-04-27_17_16_58.png
プロジェクト名は、Firebaseのプロジェクト名と同じにしておくと分かり易いです。
スクリーンショット_2021-04-27_17_17_46.png
Package nameは後で紐付けの際に必要になります。
確認できますので、覚えておかなくても大丈夫です。
スクリーンショット_2021-04-27_17_18_53.png

3. iosの紐付け

3-1. Info.plistの作成

Finderから AndroidStudioProject > ios > Runner.xcworkspaceを選択して開きます。
スクリーンショット_2021-04-27_17_42_15.png
xcodeが開くと左上部のRunnerを表示させ、Bundle Identifierをコピー
スクリーンショット_2021-04-27_17_48_46.png
Firebaseの画面に戻り、ペーストしアプリを追加します。
スクリーンショット_2021-04-27_17_49_46.png
GoogleService-Info.plistをクリックしてダウンロードを開始
これでplistの作成ができました。
スクリーンショット_2021-04-27_18_01_47.png

3-2. iosアプリにFirebaseを追加

plistが作成されているので、FinderからxcodeのRunnerフォルダにドラッグして追加
スクリーンショット_2021-04-27_18_08_18.png
確認画面が出ますので、チェックボックスを埋めて完了して下さい。
スクリーンショット_2021-04-27_18_10_12.png
Firebaseの画面に戻り[次へ]をクリック
何度か[次へ]を続けて、[コンソールへ戻る]のボタンをクリックしてコンソールに移動します。

3-3. firebase_coreを追加

pubsc.yamlを開いて、dependencies: の項目にfirebase_coreを貼り付けます。
スクリーンショット_2021-10-11_14_14_02.png
これでiosとの連携は終了です。


4. Androidの紐付け

4-1. jsonファイルの作成

コンソールでAndroidのアイコンをクリック
スクリーンショット_2021-04-27_18_59_54.png
xcodeに移動して、Android > app > build.gradle(ゾウさん)を開いて下さい。
そこにapplicationIDがあるのでコピー
スクリーンショット_2021-04-27_19_03_19.png
Firebaseに戻りコピーしたものを、パッケージ名のところにペーストし[アプリを登録]をクリック
スクリーンショット_2021-04-27_19_12_46.png
iosの時はplistでしたが、今回はjsonファイルをダウンロード
スクリーンショット_2021-04-27_19_19_04.png

4-2. AndroidアプリにFirebaseを追加 

AndroidStudioに移動して、Finderからjsonファイルをドラッグ
ドラッグ先はAndroid直下のappフォルダ
スクリーンショット_2021-04-27_19_21_00.png
search for referencesにチェックを入れて[Refactor]をクリック
search for referencesにチェックを入れておくと、コードベース全体で特定のコード要素が参照されている場所を検索することができます。
スクリーンショット_2021-04-27_19_29_42.png
Project画面にGoogle-services.jsonが追加されていることが確認できると思います。
これでFirebaseとFlutter [ios] [Android] の紐付けは完了です。


5. 終わりに

最後まで読んで頂きありがとうございました。
まだまだ初学者ですので、もっと良い記述の方法があればご指摘お願い致します!

8
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
17