· Flutter Firebase

Firebaseのセットアップ方法

  • このエントリーをはてなブックマークに追加

はじめに

Cloud Firestoreを始めFirebaseのサービスを使えるようにするためには、Firebaseにプロジェクトを追加し設定する必要があります。 ここではFirebaseにプロジェクトを追加しFlutterプロジェクトでAndroidとiOSでFirebaseを使えるようになるまでの設定方法を見ていきたいと思います。

Firebaseにプロジェクトを追加

こちらのURL(https://console.firebase.google.com/)を開き、プロジェクトを追加します。今回の場合はsd-2019-04-flutterというプロジェクトを追加しました。

AndroidでFirebaseを使えるようにする

AndroidでFirebaseを使えるようにするためには、google-services.jsonというファイルをダウンロードし、Flutterプロジェクトに追加する必要があります。

google-services.jsonをダウンロードする

そのためにはまず、Firebaseのプロジェクト設定からアプリをAndroidアプリを追加する必要があります。

ドロイド君のアイコンをクリックしてください。

すると、Androidパッケージの入力が求められますので、パッケージを入力します。

パッケージ名を確認するには、Flutterプロジェクトの android/app/build.gradleファイルを開き、applicationIdを探してください。その設定値がパッケージ名になります。

パッケージを入力したらgoogle-services.jsonがダウンロードできるようになりますので、ダウンロードしてください。

Flutterプロジェクト(Android)でセットアップする

Flutterプロジェクトにgoogle-services.jsonを格納する

Flutterプロジェクトルート/android/app以下に格納してください。

build.gradleファイルを編集する

Flutterプロジェクトルート/android/ にある build.gradleファイルを開いて、google-serviceプラグインを追加します。

dependencies {
    classpath 'com.android.tools.build:gradle:3.2.1'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    classpath 'com.google.gms:google-services:4.1.0' // ←この行を追加
}

次にFlutterプロジェクトルート/android/appにある build.gradleファイルを開いて、最下行に下記を追記してください。

apply plugin: 'com.google.gms.google-services'

これでAndroidに関してはFirebaseのセットアップは終了です。

iOSでFirebaseを使えるようにする

iOSでFirebaseを使えるようにするためには、GoogleService-Info.plistというファイルをダウンロードし、Flutterプロジェクトに追加する必要があります。

GoogleService-Info.plistをダウンロードする

そのためにはまず、Firebaseのプロジェクト設定からアプリをAndroidアプリを追加する必要があります。

iOSと書かれたアイコンをクリックしてください。

すると、iOSのバンドルIDの入力が求められますので、バンドルIDを入力します。

バンドルIDを確認するには、XcodeでFlutterプロジェクトを開いて確認するのが簡単だと思います。

XcodeでFlutterプロジェクトを開くには、Android Studioを使っている場合、Toolsメニューから開くことができます。

dartファイル(例えばmain.dart)を開いている状態で、Tools->Flutter->Open iOS module in Xcodeをクリックしてください。

Xcodeが開いたら、左側のProject NavigatorのRunnerを選択すると右側にBundle Identifierという項目があるのでその設定値がバンドルIDになります。

バンドルIDを入力する画面に戻って、バンドルIDを入力してアプリを登録します。その後、GoogleService-Info.plistがダウンロードできるようになりますので、ダウンロードしてください。

Flutterプロジェクト(iOS)でセットアップする

FlutterプロジェクトにGoogleService-Info.plistを格納する

上記でも書きましたが、XcodeでFlutterプロジェクトを開いてください。

Project NavigatorでRunner/Runner以下にGoogleService-Info.plistファイルを追加してください。

これでiOSに関してFirebaseのセットアップは終了です。

  • このエントリーをはてなブックマークに追加
  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket