Flutter アプリに Firebase を追加する

このガイドの手順に沿って、Flutter アプリに Firebase プロダクトを追加してください。

ステップ 1: 環境を設定する

  • ご利用のオペレーティング システムに対応した Flutter をインストールし、続いて以下のコンポーネントもインストールします。

    • Flutter SDK
    • サポート ライブラリ
    • プラットフォーム固有のソフトウェアと SDK

  • お好みのエディタまたは IDE（Android Studio、IntelliJ、Xcode、VS Code など）をインストールします。

  • エディタまたは IDE で Flutter アプリを開きます。

    • iOS 向け開発 - アプリのターゲットは iOS 8 以降にしてください。
    • Android 向け開発 - アプリのターゲットは API レベル 16（Jelly Bean）以降にする必要があります。

  • アプリを実行するデバイスまたはエミュレータを設定します。

    • Android 向け開発 - エミュレータでは、Google Play のエミュレータ イメージを使用する必要があります。

  • Google アカウントを使って Firebase にログインします。

ステップ 2: Firebase プロジェクトを作成する

Flutter アプリに Firebase を追加する前に、アプリに接続する Firebase プロジェクトを作成します。Firebase プロジェクトの詳細については、Firebase プロジェクトについて理解するをご覧ください。

ステップ 3: Firebase を使用するようにアプリを構成する

アプリが Firebase プロジェクトに接続するための構成を行います。複数のアプリを構成できます。これを行うには、アプリのプラットフォーム固有の ID を Firebase プロジェクトに登録します。アプリの構成ファイルは Firebase によって自動的に生成されます。

アプリを構成する手順の詳細については、次のプラットフォーム固有の手順（iOS 用および Android 用）を使用します。

Flutter アプリの最上位ディレクトリ直下にある ios ディレクトリと android ディレクトリに iOS と Android のプラットフォーム固有の構成ファイルがそれぞれ保存されます。

iOS アプリを構成する

  1. Firebase コンソールの [Project Overview] ページの中央にある iOS アイコンをクリックして設定ワークフローを起動します。

    すでに Firebase プロジェクトにアプリまたはゲームを追加している場合は、[アプリを追加] をクリックするとプラットフォームのオプションが表示されます。

  2. アプリを Firebase プロジェクトに追加します。

    1. アプリのバンドル ID を [iOS バンドル ID] に入力します。

      • このバンドル ID を探すには、XCode でアプリを開き、最上位の Runner ディレクトリの [全般] タブにアクセスします。[バンドル ID] フィールドの値が iOS バンドル ID です（例: com.yourcompany.yourproject）。

    2. （省略可）設定ワークフローの指示に従って他のアプリ情報を入力します。

    3. [アプリの登録] をクリックします。

  3. Firebase iOS 構成ファイルをアプリに追加します。

    1. [Download GoogleService-Info.plist] をクリックして、Firebase iOS 構成ファイル（GoogleService-Info.plist）を取得します。

      • Firebase iOS 構成ファイルはいつでも再ダウンロードできます。
      • 構成ファイルに (2) のような文字が追加されていないことを確認してください。

    2. ダウンロードしたファイルを Flutter アプリの Runner/Runner ディレクトリに移動します。

  4. Firebase コンソールの設定ワークフローに戻り、[次へ] をクリックして残りの手順をスキップします。

  5. FlutterFire プラグインを追加するに進みます。

Android アプリを構成する

  1. Firebase コンソールの [Project Overview] ページの中央にある Android アイコンをクリックして設定ワークフローを起動します。

  2. アプリを Firebase プロジェクトに追加します。

    1. アプリのアプリケーション ID をフィールド [Android パッケージ名] に入力します。

      • アプリケーション ID はパッケージ名と呼ばれることもあります。

      • このアプリケーション ID はモジュール（アプリレベル）の Gradle ファイル（通常は android/app/build.gradle）内に記載されています（アプリケーション ID の例: com.yourcompany.yourproject）。

    2. （省略可）設定ワークフローの指示に従って他のアプリ情報を入力します。

    3. [アプリの登録] をクリックします。

  3. Firebase Android 構成ファイルをアプリに追加します。

    1. [Download google-services.json] をクリックして、Firebase Android 構成ファイル（google-services.json）を取得します。

      • Firebase Android 構成ファイルはいつでも再ダウンロードできます。
      • 構成ファイルに (2) のような文字が追加されていないことを確認してください。

    2. 構成ファイルを Flutter アプリの android/app ディレクトリに移動します。

  4. Android アプリで Firebase サービスを有効にするには、Gradle ファイルに google-services プラグインを追加します。

    1. ルートレベル（プロジェクト レベル）の Gradle ファイル（android/build.gradle）に、Google サービス プラグインを含めるためのルールを追加します。Google の Maven リポジトリがあることも確認してください。

      buildscript {

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }

  // ...
  dependencies {
    // ...

    // Add the following line:
    classpath 'com.google.gms:google-services:3.2.1'  // Google Services plugin
  }
}
allprojects {
  // ...

  repositories {
    // Check that you have following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}

    2. モジュール（アプリレベル）の Gradle ファイル（通常は android/app/build.gradle）で、ファイルの末尾に以下の行を追加します。

      dependencies {
  // ...
}

// ...

// Add the following line to the bottom of the file:
apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin

    3. flutter packages get を実行します。

      パッケージとプラグインの管理の詳細については、パッケージの使用をご覧ください。

  5. FlutterFire プラグインを追加するに進みます。

ステップ 4: FlutterFire プラグインを追加する

Flutter はプラグインを使用して、Firebase API などの幅広いプラットフォーム固有サービスへのアクセスを提供します。プラグインには、各プラットフォームのサービスと API にアクセスするためのプラットフォーム固有のコードが含まれています。

Firebase にはさまざまなライブラリを通してアクセスします。Firebase プロダクトごと（Database、Authentication、アナリティクス、Storage など）に個別のライブラリが存在します。Flutter が提供する Firebase プラグインのセットは、FlutterFire と総称されています。

Flutter はマルチプラットフォームの SDK であるため、各 FlutterFire プラグインは iOS と Android の両方に適用できます。つまり、Flutter アプリに追加した FlutterFire プラグインは、iOS と Android の両方のバージョンの Firebase アプリで使用されます。

FlutterFire プラグインの最新リストについては、FlutterFire のドキュメントをご覧ください。

  1. エミュレータまたはデバイス上で、アプリが実行されていないことを確認します。

  2. Flutter アプリのルート ディレクトリから、pubspec.yaml ファイルを開きます。

  3. Firebase Core SDK 用の FlutterFire プラグインを追加します。

    dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.2.5  # add dependency for Firebase Core

  4. 特定の Firebase プロダクトを使用するための FlutterFire プラグインを追加します。

    次のセクションのアナリティクスを追加するでは、FlutterFire プラグインをアプリに追加する方法を例示しています。

  5. アプリを実行してインストールが正常に実施されたことを確認します。

これで設定は完了です。Flutter アプリは Firebase を使用するように登録され、構成されました。

アナリティクスを追加する（省略可）

Firebase 向け Google アナリティクスを Flutter アプリに追加することは任意ですが、この方法により、Firebase と Flutter が正常に動作していることを比較的簡単に確認できます。また、アナリティクスは開発やデバッグだけでなく、本番環境用アプリの正常性を追跡するのにも非常に役立ちます。

  1. エミュレータまたはデバイス上で、アプリが実行されていないことを確認します。

  2. pubspec.yaml ファイルに、Firebase 向け Google アナリティクス用の FlutterFire プラグインを追加します。

    dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.2.5       # This dependency was added during initial configuration.
  firebase_analytics: ^1.0.4  # add dependency for Google Analytics for Firebase

  3. flutter packages get を実行します。

    パッケージとプラグインの管理の詳細については、パッケージの使用をご覧ください。

アナリティクス アプリの例

すべてのパッケージと同様に、firebase_analytics プラグインにはサンプル プログラムが付属しています。

  1. Firebase を使用するように構成した Flutter アプリを開きます。

  2. アプリの lib ディレクトリにアクセスして、既存の main.dart ファイルを削除します。

  3. Firebase 向け Google アナリティクスのサンプル プログラム リポジトリから、次の 2 つのファイルをコピーしてアプリの lib ディレクトリに貼り付けます。

    • main.dart
    • tabs_page.dart

  4. Flutter アプリを実行します。

  5. Firebase コンソールでアプリの Firebase プロジェクトに移動し、左側のナビゲーションで [アナリティクス] をクリックします。

    • [Dashboard] をクリックします。アナリティクスが正常に動作している場合、ダッシュボードの [過去 30 分間のユーザー] パネルにアクティブなユーザーが表示されます（この処理にはしばらく時間がかかる場合があります）。

    • [DebugView] をクリックします。この機能を有効にすると、サンプル プログラムによって生成されたすべてのイベントが表示されます。

アナリティクスの設定の詳細については、iOS と Android のスタートガイドをご覧ください。

次のステップ