[Flutter] 初心者でも簡単に導入可能！Firebaseのセットアップ方法

今回は flutter アプリに Firebase を追加する手順をご紹介します。Firebase は Google が提供しているバックエンドで行う機能を提供しているクラウドサービスで、MBaas / BaaSと呼ばれているものです。

Firebase を使うメリットとしては、バックエンド処理をしてくれるため、サーバの管理や保守の手間が省け、クライアントサイドの開発に集中することができます。Flutter のプロジェクトに追加するのも初心者でも簡単にできるので、以下の手順を見ていきましょう。

Firebaseパッケージのインストール

Firebase を使うためのパッケージをインストールするために、pubspec.yaml ファイルに以下のように追加します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter


  cupertino_icons: ^1.0.0
  //以下の2行を追加
  firebase_core: ^0.5.0
  cloud_firestore: ^0.14.0+2

Firebaseにアクセスしてプロジェクトを作成

Firebase を利用するには Google アカウントが必要になります。こちらにアクセスしてログインすると以下の画面が表示されます。

「プロジェクトを作成」をクリックしてプロジェクト名を入力して、「Firebase の規約に同意します」にチェックをつけて「続行」ボタンをクリックします。

次に Googole アナリティクスとの連携設定の画面が表示されます。任意ですが、ここでは設定しないので、オフにして「プロジェクト作成」ボタンをクリックします。

プロジェクトの作成が開始され、完了画面が表示されたら「続行」ボタンをクリックします。

次のような画面が表示されたら、プロジェクトの作成は完了しています。

Androidアプリの設定

次は Android アプリ用の設定を行います。ドロイド君アイコンをクリックします。

まず Android パッケージ名を入力します。パッケージ名は、android/app/src/main/AndroidManifest.xml ファイルの上部に記載されています。

ここに記載されている、パッケージ名を入力します。

デバッグ用の署名証明書 SHA-1 は、Google Sign-in を利用する場合に必要になるようです。こちらのページに SHA1の確認方法が記載されています。

ターミナルを開いて以下のコマンドを入力します。パスワードを聞かれたら、android と入力します。

keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

表示された、SHA1: 以降の部分をコピペすればOKです。ここでは省略します。「アプリ登録」ボタンをクリックします。

次の画面で、「google-services.json をダウンロード」ボタンをクリックします。

ダウンロードした google-services.json ファイルをプロジェクトの android/app 配下に入れます。VSCode のディレクトリツリーにドラッグアンドドロップすればOKです。

「次へ」ボタンをクリックすると以下のような画面が表示されるので、順に手順を説明していきます。

android/build.gradle ファイルを開いて、①の行を dependencies 内に追加します。

android/build.gradle

buildscript {
    repositories {
        google()
    }

    dependencies {
        ...
        //ここに追加
        classpath 'com.google.gms:google-services:4.3.5'
    }
}

注意

build.gradle ファイルは、android/app/配下にもあるので修正するファイルを間違えないようにしましょう

次に、android/app/build.gradle ファイルを開いて、②の行をファイルの最後に追加します。

android/app/build.gradle

//ファイルの最後に追加
apply plugin: 'com.google.gms.google-services'

最後に、multiDexEnabled を追記します。

android/app/build.gradle

defaultConfig {
    applicationId "com.example.test_app1"
    minSdkVersion 16
    targetSdkVersion 29
    //次の行を追記
    multiDexEnabled true
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

multiDexEnabled については以下の記事をご参照ください。

参考64K を超えるメソッドを使用するアプリ向けに multidex を有効化する | Android デベロッパーAndroid Developers

「次へ」ボタンをクリックし以下の画面が表示されれば、Android の設定は完了です。「コンソールに進む」をクリックしましょう。