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

使用できるプラグイン

プロダクト プラグイン名 iOS Android ウェブ その他の Apple
（macOS など）		 Windows
Firebase AI Logic 1 firebase_ai
ベータ版
Analytics 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
ベータ版
Data Connect firebase_data_connect
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
ベータ版

1 Firebase AI Logic は、以前はプラグイン firebase_vertexai で「Vertex AI in 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、ウェブの各スタートガイドをご覧ください。

次のステップ