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 を初期化します。

   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
   runApp(const MyApp());
   

5. Flutter アプリケーションを再ビルドします。

   flutter run
   

デモ プロジェクトを使用する場合は、Firebase エミュレータを起動し、lib/main.dart ファイルで demoProjectId（demo- で始まる）を使用して Firebase を初期化します。

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

ステップ 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 を使用するように登録され、構成されました。

使用できるプラグイン

Analyticsを使ってサンプルアプリを試す

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

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

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

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

   • main.dart
   • tabs_page.dart

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

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

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

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

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

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

Trusted Types のサポート

Flutter 用の Firebase SDK は、Trusted Types の使用をサポートしており、DOM ベース（クライアントサイド）の XSS 攻撃を防止できます。アプリで Trusted Types の適用を有効にすると、Firebase SDK はカスタム Trusted Type ポリシー（flutterfire-firebase_core、flutterfire-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 ファイルの window.addEventListener コールバック内に明示的に追加します。

       window.addEventListener('load', async function (ev) {
         window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js");
         window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/11.0.2/firebase-analytics.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

   • または、プラグインの Firebase JavaScript SDK コードを「gstatic」ドメインからダウンロードし、プロジェクトに格納して手動で読み込めるように JavaScript ファイルに保存します。

       // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: 
       window.addEventListener('load', async function (ev) {
         window.firebase_analytics = await import("./my-analytics.js");
         window.firebase_firestore = await import("./my-firestore.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

次のステップ

• Firebase Flutter Codelab を実際に体験します。

• アプリをリリースする準備をする。

  • Google Cloud コンソールでプロジェクトの予算アラートを設定する。
  • Firebase コンソールの [使用量と請求額] ダッシュボードをモニタリングして、複数の Firebase サービスを通じたプロジェクトの全体的な使用状況を確認する。
  • Firebase リリース チェックリストを確認する。