【Flutter + Firebase】CloudFirestoreと連携する - セットアップ編

Firebase Flutter

はじめに

最近、バックエンドにFirebaseを使ったFlutterアプリ開発を始めたので、その忘備録を書いていきます。

今回はFirestoreを使って↓の動画のようなアプリを作ってみたいと思います。今記事では、Firebaseプロジェクトの作成してFlutterアプリと連携するところまでを書いていきます。


最終目標

公式ドキュメントを参考に、最終的に↓のような投票アプリを作ってみたいと思います。

https://youtu.be/76Scz2EvjTI


手順

  1. ローカルにFlutterプロジェクトを作成
  2. FirebaseコンソールでFirebaseプロジェクトを作成
  3. FirebaseプロジェクトにiOSアプリを登録
  4. FirebaseプロジェクトにAndroidアプリを登録 ←今回はここまで！
  5. コーディング

Firebaseをバックエンドに使ったFlutterアプリでは、下準備に↑のステップを踏んできます。

では行ってみましょ〜


1. ローカルでFlutterプロジェクト作成

AndroidStudioでプロジェクト作成。

プロジェクト名をflutter_appにして作成しました。すでにrunできる状態なので、起動してみると↓が表示されると思います。

続いて、Firebase側のセットアップです。


2. Firebaseコンソールでプロジェクトを作成

Firebaseコンソールで、[新しいプロジェクトを追加]を押してプロジェクトを追加します。プロジェクト名はflutter-appとしました。


Firebaseでは、iOSアプリの追加とAndroidアプリの追加をします。

まずはiOSアプリの追加から。


iOSアプリの登録

FirebaseコンソールでiOSアプリを追加します。iOSのアイコンをクリックすると↓画面に遷移します。この画像ではすでにiOSバンドルIDが入ってますが、初めて追加する際には空欄になってますので、入力していきましょう。


iOSバンドルIDは、AndroidStudioで開いているflutter_app/iosをxcodeで開くと確認できます(↓参考)。RunnerをクリックするとBundle Identifierが確認できます。こいつがiOSバンドルIDです。

iOSバンドルができたら、次のステップ。GoogleService-info.plistをダウンロードします。

ダウンロードができたGoogleService-info.plistをxcodeのRunner/Runner配下に置きます。詳細は↓。

すると、AndroidStudioで開いているflutter_app/ios/Runner配下にGoogleService-info.plistが配置されます。ここまで確認できたらOKです！


Androidアプリの登録

続いてAndroidアプリを追加していきましょう。

iOSの時と同じように、FirebaseコンソールからAndroidのアイコンをクリックします。すると↓のようになるかと思います。この画像ではすでにAndroidパッケージ名が入ってますが、初めて追加する際には空欄になってますので、入力します。

AndroidStudiodで開いているflutter_app/android/app/src/build.gradleを開くと、applicationIdという項目があります。これがAndroidパッケージ名になるので、こいつを入力します。


android {
    ~ 略 ~
    defaultConfig {
        ~ 略 ~
        applicationId "com.example.flutter_app" //これ！
    }
}

アプリのニックネームとデバッグ用の署名証明書は今回は未記入でOKです。アプリを登録をクリックします。

続いてのステップで、google-services.jsonをダウンロードします。

落としたgoogle-services.jsonをflutter_app/android/app/src配下に置きます。↓のようになります。

最後に、flutter_app/android/build.gradleにgoogle-servicesを追加します。maven repositoryで検索して最新バージョンを追加します。


buildscript {
   repositories {
       // ...
   }

   dependencies {
       // ...
       classpath 'com.google.gms:google-services:3.2.1'   //これ！
   }
}

ここまでできたらAndroidアプリの登録はOKです。

今回はここまでです。手順が多くて大変ですね^^;　お疲れ様でした！

参考 https://codelabs.developers.google.com/codelabs/flutter-firebase/#0