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 を追加する前に、Flutter アプリに接続するための Firebase プロジェクトを作成します。

Firebase プロジェクトを作成するには:

  1. Firebase コンソールに移動します。

  2. [プロジェクトを追加] をクリックし、[プロジェクト名] でプロジェクト名を選択するか、新しいプロジェクト名を入力します。

    • アプリに関連付けられた既存の Google プロジェクトがある場合は、[プロジェクト名] プルダウン メニューからプロジェクトを選択します。
    • 既存の Google プロジェクトがない場合は、[プロジェクト名] に新しいプロジェクト名を入力します。
  3. (省略可)プロジェクト ID を編集します。

    Firebase プロジェクトには一意の ID が自動的に割り当てられます。一般公開される Firebase サービスでは、この ID は次のように表示されます。

    • デフォルト Realtime Database URL - your-project-id.firebaseio.com
    • デフォルト Cloud Storage バケット名 - your-project-id.appspot.com
    • デフォルト ホスティング サブドメイン - your-project-id.firebaseapp.com
  4. Firebase コンソールで残りの設定手順を実施した後、[プロジェクトを作成](既存の Google プロジェクトを使用する場合は [Firebase を追加])をクリックします。

Firebase プロジェクトのリソースが自動的にプロビジョニングされます。通常、この処理には数分かかります。処理が完了すると、Firebase コンソールに Firebase プロジェクトの概要ページが表示されます。

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

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

アプリの構成の詳細な手順については、以下の iOS または Android のプラットフォーム固有の手順をご覧ください。

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

iOS アプリを構成する

  1. Firebase プロジェクトの概要ページで、iOS 用の設定ウィザードを起動します。

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

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

      • このバンドル ID を見つけるには、Xcode でアプリを開き、トップレベルの Runner ディレクトリの [全般] タブにアクセスします。[Bundle Identifier] フィールドの値が iOS バンドル ID です(例: com.yourcompany.yourproject)。
    2. (省略可)設定ウィザードの指示に従って他のアプリ情報を入力します。

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

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

    1. [GoogleService-Info.plist をダウンロード] をクリックして、Firebase iOS 構成ファイル(GoogleService-Info.plist)を入手します。

      Firebase iOS 構成ファイルはいつでも再ダウンロードできます。

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

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

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

Android アプリを構成する

  1. Firebase プロジェクトの概要ページで、Android 用の設定ウィザードを起動します。

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

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

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

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

    2. (省略可)設定ウィザードの指示に従って他のアプリ情報を入力します。

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

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

    1. [google-services.json をダウンロード] をクリックして、Firebase Android 構成ファイル(google-services.json)を入手します。

      Firebase Android 構成ファイルはいつでも再ダウンロードできます。

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

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

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

      buildscript {
        // ...
        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'  // Gradle plugin
      
    3. flutter packages get を実行します。

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

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

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

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

Firebase にはさまざまなライブラリを通してアクセスします。Firebase サービスごと(データベース、認証、アナリティクス、ストレージなど)に個別のライブラリが存在します。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 プロジェクトに移動し、左側のナビゲーションで [アナリティクス] をクリックします。

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

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

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

Firebase と Flutter のその他のリソース

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。