Flutter アプリに Firebase を追加する

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

前提条件

  • お好みのエディタまたは IDE をインストールします。

  • Flutter アプリのターゲットが次のプラットフォーム バージョン以降であることを確認します。

    • iOS 10
    • macOS 10.12

  • アプリを実行するための物理的な Apple デバイスまたはシミュレータを設定します。

    • Cloud Messaging の場合は、次の作業を行います。

      • 物理的な Apple デバイスを設定します。
      • Apple Developer アカウントの Apple Push Notification Authentication Key を取得します。
      • プッシュ通知を XCode の [App] > [Capabilities] で有効にします。

    • その他のすべての Firebase プロダクトで、物理 iOS デバイスと iOS シミュレータのいずれかを使用できます。

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

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

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

Flutter アプリがまだない場合は、スタートガイド: テストドライブを参照して、お好みのエディタまたは IDE で新しい Flutter アプリを作成してください。

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

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

ステップ 2: アプリを Firebase に登録する

  1. Firebase コンソールの [プロジェクトの概要] ページの中央にある iOS+ アイコン（）をクリックして設定ワークフローを起動します。

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

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

    XCode 内で開いたプロジェクトからバンドル ID を見つけます。プロジェクト ナビゲータで最上位のアプリを選択し、[全般] タブにアクセスします。[バンドル ID] の値が iOS バンドル ID です（例: com.yourcompany.ios-app-name）。

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

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

ステップ 3: Firebase 構成ファイルを追加する

  1. [GoogleService-Info.plist をダウンロード] をクリックして、Firebase Apple プラットフォーム構成ファイル（GoogleService-Info.plist）を取得します。

  2. Xcode を使用して、Flutter アプリの Runner/Runner ディレクトリにファイルを移動します。

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

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

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

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

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

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

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

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

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

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

    dependencies:
  flutter:
    sdk: flutter
  # Add the dependency for the Firebase Core Flutter SDK
  firebase_core: ^0.4.0+9

  4. アプリで使用する Firebase プロダクトの FlutterFire プラグインを追加します。

    アナリティクスが有効な場合 

    dependencies:
  flutter:
    sdk: flutter
  # Check that you have this dependency (added in the previous step)
  firebase_core: ^0.4.0+9
    
  # Add the dependency for the FlutterFire plugin for Google Analytics
  firebase_analytics: ^5.0.2
    
  # Add the dependencies for any other Firebase products you want to use in your app
  # For example, to use Firebase Authentication and Cloud Firestore
  firebase_auth: ^0.14.0+5
  cloud_firestore: ^0.12.9+5

    アナリティクスが無効な場合 

    dependencies:
  flutter:
    sdk: flutter
  # Check that you have this dependency (added in the previous step)
  firebase_core: ^0.4.0+9
    
  # Add the dependencies for the Firebase products you want to use in your app
  # For example, to use Firebase Authentication and Cloud Firestore
  firebase_auth: ^0.14.0+5
  cloud_firestore: ^0.12.9+5

  5. flutter packages get を実行します。
    パッケージとプラグインの管理の詳細については、パッケージの使用をご覧ください。

  6. アナリティクスを追加した場合は、アプリを実行して、Firebase の統合に成功したという確認を Firebase に送信します。それ以外の場合は、この確認手順をスキップできます。

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

アナリティクスを使ってサンプルアプリを試す

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

  1. Firebase を使用するように構成した Flutter アプリを開きます（このページの手順を参照）。

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

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

    • main.dart
    • tabs_page.dart

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

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

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

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

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

次のステップ