Flutter アプリに Firebase を追加する

前提条件

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

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

    • Flutter SDK
    • サポート ライブラリ
    • プラットフォーム固有のソフトウェアと SDK
  • Google アカウントを使用して Firebase にログインします。

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

ステップ 1: 必要なコマンドライン ツールをインストールする

  1. まだインストールしていない場合は、Firebase CLI をインストールします。

  2. Google アカウントで Firebase にログインするには、次のコマンドを実行します。

    firebase login
    
  3. 任意のディレクトリで次のコマンドを実行して、FlutterFire CLI をインストールします。

    dart pub global activate flutterfire_cli
    

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

FlutterFire CLI を使用して、Flutter アプリを Firebase に接続するように構成します。

Flutter プロジェクト ディレクトリで、次のコマンドを実行して、アプリの構成ワークフローを開始します。

flutterfire configure


ステップ 3: アプリで Firebase を初期化する

  1. Flutter プロジェクト ディレクトリで、次のコマンドを実行してコア プラグインをインストールします。

    flutter pub add firebase_core
    
  2. Flutter プロジェクト ディレクトリで次のコマンドを実行して、Flutter アプリの Firebase 構成を最新にします。

    flutterfire configure
    
  3. lib/main.dart ファイルで、Firebase Core プラグインと、以前に生成した構成ファイルをインポートします。

    import 'package:firebase_core/firebase_core.dart';
    import 'firebase_options.dart';
    
  4. また、lib/main.dart ファイルで、構成ファイルによってエクスポートされた DefaultFirebaseOptions オブジェクトを使用して Firebase を初期化します。

    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );
    
  5. Flutter アプリケーションを再ビルドします。

    flutter run
    

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

Flutter アプリでは、Firebase プロダクトごとに 1 つずつ、さまざまな Firebase Flutter プラグインを使用できます(Cloud Firestore、Authentication、Analytics など)。

Flutter はマルチプラットフォーム フレームワークであるため、各 Firebase プラグインは、Apple、Android、ウェブのプラットフォームに適用できます。つまり、Flutter アプリに Firebase プラグインを追加すると、Apple バージョン、Android バージョン、ウェブ バージョンのアプリで使用されます。

Firebase Flutter プラグインを追加する方法は次のとおりです。

  1. Flutter プロジェクト ディレクトリで、次のコマンドを実行します。

    flutter pub add PLUGIN_NAME
  2. Flutter プロジェクト ディレクトリで、次のコマンドを実行します。

    flutterfire configure
    

    このコマンドを実行すると、Flutter アプリの Firebase 構成が最新の状態になり、Android の Crashlytics と Performance Monitoring で必要な Gradle プラグインがアプリに追加されます。

  3. 完了したら、Flutter プロジェクトを再ビルドします。

    flutter run
    

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

使用できるプラグイン

プロダクト プラグイン名 iOS Android ウェブ その他の Apple
(macOS など)
Windows
アナリティクス firebase_analytics
ベータ版
App Check firebase_app_check
ベータ版
Authentication firebase_auth
ベータ版 ベータ版
Cloud Firestore cloud_firestore
ベータ版 ベータ版
Cloud Functions cloud_functions
ベータ版
Cloud Messaging firebase_messaging
ベータ版
Cloud Storage firebase_storage
ベータ版 ベータ版
Crashlytics firebase_crashlytics
ベータ版
Dynamic Links firebase_dynamic_links
In-App Messaging firebase_in_app_messaging
Firebase インストール firebase_app_installations
ベータ版
ML モデル ダウンローダー firebase_ml_model_downloader
ベータ版
Performance Monitoring firebase_performance
Realtime Database firebase_database
ベータ版
Remote Config firebase_remote_config
ベータ版
Vertex AI for Firebase firebase_vertexai
ベータ版

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

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

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

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

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

    • main.dart
    • tabs_page.dart
  4. Flutter アプリを実行します。

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

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

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

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

ウェブアプリのビルドに関する注意事項

Trusted Types のサポート

Flutter 用の Firebase SDK は、Trusted Types の使用をサポートしており、DOM ベース(クライアントサイド)の XSS 攻撃を防止できます。アプリで Trusted Types の適用を有効にすると、Firebase SDK はカスタム Trusted Type ポリシー(flutterfire-firebase_coreflutterfire-firebase_auth など)を使用して、スクリプトを DOM に挿入します。

Firebase JavaScript SDK の自動挿入を無効にする

デフォルトでは、ウェブ用にビルドする際に、Firebase JavaScript SDK が Firebase Flutter SDK によって自動的に挿入されます。Firebase JavaScript SDK が自動的に挿入されないようにするには、次の手順に沿って操作します。

  1. Flutter プロジェクトの web/index.html ファイルにある <script> タグに次のプロパティを追加して、自動挿入スクリプトを無視します。

    <!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
    <!-- Put in the names of all the plugins you wish to ignore: -->
    window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
    
  2. 次のいずれかの方法を使用してスクリプトを手動で読み込みます。

    • SDK を web/index.html ファイルに明示的に追加します。

      <script src="https://www.gstatic.com/firebasejs/10.12.3/firebase-analytics.js"></script>
      <script src="https://www.gstatic.com/firebasejs/10.12.3/firebase-firestore.js"></script>
      
    • または、プラグインの Firebase JavaScript SDK コードを「gstatic」ドメインからダウンロードし、プロジェクトに格納して手動で読み込めるように JavaScript ファイルに保存します。

      <!-- "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: -->
      <script src="./my-analytics.js"></script>
      <script src="./my-firestore.js"></script>
      

次のステップ