サイトアイコン 【TechGrowUp】

Flutter開発入門29 FlutterFireを使ってFirebaseをFlutterにセットアップする方法

Daichi Mizuno

はじめに

　FlutterFireは、FlutterアプリケーションとFirebaseを連携させるための公式ライブラリです。FlutterFireを使うことで、Firebaseの様々な機能（認証、データベース、クラウドストレージ、プッシュ通知など）をシンプルかつ効率的にFlutterアプリに統合できます。今回は、FlutterFire CLIを使ってFirebaseをFlutterにセットアップする方法をステップごとに解説します。

　この記事では、Firebaseプロジェクトの作成からFlutterへのセットアップまでを丁寧に説明し、Firebase認証やクラウド機能を利用するための準備を整えます。FlutterアプリでFirebaseを利用したいと考えている開発者向けの内容です。

Firebaseとは

　Firebaseは、Googleが提供するクラウドベースのプラットフォームで、開発者がアプリケーションに必要なバックエンド機能（データベース、認証、クラウド機能、ストレージ、プッシュ通知など）を簡単に追加するためのサービスです。Firebaseは、Flutterと強力に統合されており、クロスプラットフォームアプリで一貫性のあるバックエンド機能を利用することができます。

前提条件

　FirebaseをFlutterに統合するには、以下のツールがインストールされている必要があります。

  1. Flutter SDK
  2. Firebaseアカウント
  3. Google Cloudプロジェクト
  4. Node.js & npm（FlutterFire CLIを利用するため）

　また、今回の記事では、iOSとAndroidの両方にFirebaseを設定する方法を説明します。

ステップ1：Firebaseプロジェクトの作成

　1.1 Firebaseコンソールにアクセス

　1.1 Firebaseコンソールにアクセス
　まずは、Firebaseのウェブサイトにアクセスします： Firebase コンソール

1.2 プロジェクトの作成

  1. Firebaseコンソールで「プロジェクトを追加」をクリックします。
  2. プロジェクト名を入力し、Google Analyticsの設定を選択します（必要に応じて）。
  3. Firebaseプロジェクトが作成されるのを待ちます。

これで、Firebaseプロジェクトが作成されました。

ステップ2：FlutterFire CLIのインストールと初期化

　FlutterFire CLIを使うことで、FirebaseプロジェクトをFlutterアプリに簡単に設定できます。

2.1 FlutterFire CLIのインストール

　FlutterFire CLIを使用するために、Node.jsとnpmが必要です。Node.jsがインストールされていない場合は、公式サイトからインストールしてください。

　次に、npmを使ってFlutterFire CLIをグローバルにインストールします。

npm install -g firebase-tools

　Firebase CLIが既にインストールされている場合は、以下のコマンドでアップデートできます。

firebase upgrade

2.2 Firebase CLIのログイン

　Firebase CLIを使ってFirebaseにログインします。

firebase login

　Googleアカウントでログインして、認証を完了させてください。

2.3 FlutterFireの初期化

　プロジェクトディレクトリに移動して、FlutterFireのインストールと設定を行います。

dart pub global activate flutterfire_cli
flutterfire configure

　このコマンドを実行すると、Firebaseプロジェクトを選択する画面が表示されます。先ほど作成したFirebaseプロジェクトを選択します。

　FlutterFire CLIは、firebase_options.dartファイルを自動的に生成し、Firebaseプロジェクトの設定を追加します。

ステップ3：FlutterアプリへのFirebaseパッケージの追加

　次に、FlutterアプリでFirebaseを利用するために、firebase_coreパッケージとその他必要なFirebase関連パッケージを追加します。

3.1 pubspec.yamlにパッケージを追加

　pubspec.yamlファイルに以下のようにFirebase関連のパッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^3.5.0

3.2 パッケージのインストール

　以下のコマンドで依存パッケージをインストールします。

flutter pub get

ステップ4：Firebaseの初期化

　FlutterアプリでFirebaseを使用するには、アプリを起動する際にFirebaseを初期化する必要があります。

4.1 main.dartに初期化コードを追加

　lib/main.dartファイルを開き、Firebase.initializeApp()を呼び出してFirebaseの初期化を行います。

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';  // FlutterFire CLIで生成されたファイルをインポート

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform, // FlutterFireのオプションを設定
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Setup',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Firebase Setup Complete'),
        ),
        body: Center(
          child: Text('Firebase is successfully initialized!'),
        ),
      ),
    );
  }
}

　これでFirebaseがFlutterアプリに統合され、アプリ起動時にFirebaseが初期化されるようになります。

まとめ

　FlutterFireを使うことで、FirebaseをFlutterアプリに簡単に統合できます。今回のステップを実行することで、Firebaseの認証やデータベースなど、さまざまな機能を利用したアプリ開発が可能になります。今後はさらにFirebaseの各種サービス（Firestore、Analytics、Cloud Functionsなど）を活用して、アプリのバックエンドを強化してみましょう。

モバイルバージョンを終了