FlutterとFirebaseを連携させて、ローカルで動かしてみた

はじめに

初めまして、プロトソリューションの前原と申します。

2022年に入社し、AIテクノロジー推進室という部署でAIやアプリ開発などに携わっています。

現在は、スマホアプリの開発に奮闘中です。

開発で使っているFirebaseがとても便利でしたので、

この記事では、Firebaseの機能のひとつであるFirestoreをローカルで立ち上げて、Flutterと連携するまでを紹介していきます。

Firebaseをローカル環境で実行してみよう

早速ですが、手順を紹介していきます。

注意点として、Flutterの環境構築はこの記事で解説していません。

外部の記事にやり方はたくさんあるので、この記事では割愛させていただきます。

最初のステップとして、Firebaseのプロジェクトを作成します。

名前は任意で大丈夫ですが、この記事では「firebase-demo」とします。

Google アナリティクスは扱いませんのでオフに設定して、プロジェクトを作成します。

Firebaseプロジェクトが作成できました。

次に以下のコマンドを実行して、Flutterプロジェクトを作成します。

アプリ名は任意で大丈夫です。


flutter create firebase_demo

Firebase CLIをインストールして、コマンドラインからFirebaseを実行できるようにします。


npm install -g firebase-tools

Firebaseにログインします。

ログインには、Googleアカウントが必要になります。

 
firebase login

次にFlutterFireをコマンドラインで実行できるようにします。


dart pub global activate flutterfire_cli

FlutterにFirebaseの構成を追加するため、以下のコマンドを実行します。


flutterfire configure

今回は、iosを選択して進めますが、

Flutterは、android、macos、webにも対応しているので、ぜひ他のプラットフォームでも試してください。

 
? Which platforms should your configuration support (use arrow keys & space to select)? ›
      android
  ✔ ios
      macos
      web

FlutterでFirebaseを使うためのプラグインを追加します。


flutter pub add firebase_core

Firebaseに追加したプラグインの構成を反映するため、再度コマンドを実行します。

プラットフォームの選択は、上記と同じiosにします。


flutterfire configure

FlutterにFirebaseの構成ファイルをインポートします。

lib/main.dartに、Firebaseを初期化するコードを加えます。


import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

 main() async {
    // Firebaseを初期化
    WidgetsFlutterBinding.ensureInitialized()
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform,
    )
    runApp(const MyApp())
}

アプリを起動します。

正常に起動できたら、FlutterとFirebaseを連携する手順は完了です。


flutter run

次のステップは、ローカル環境でFirestoreを立ち上げるまでを紹介します。

Firebaseに、Firestoreを追加します。

以下のコマンドから、FirestoreとEmulatorsを追加します。


firebase init

FirestoreとEmulatorsを選択して進めます。


? Which Firebase features do you want to set up for this directory? Press Space to select features, then ? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press <space> to select,
 <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ Authentication Emulator
 ◯ Functions Emulator
 ◉ Firestore Emulator
 ◯ Database Emulator
 ◯ Storage Emulator

エミュレータで使用するFirebaseの機能を追加します。

この記事では、Firestoreを選択します。

エミュレータを立ち上げます。


firebase emulators:start

コマンドラインのリンクからアクセスして、エミュレータが表示されたら成功です。

選択したFirestoreが、Onになっていることが確認できます。

データを追加してみます。

Start collectionをクリックして、項目を入力後にSaveします。

データが追加されました。

Firestoreのエミュレータはデータの保持ができないため、停止するとデータが消えてしまいます。

データを残したい場合は、エミュレータのデータをエクスポートして次の起動時に読み込む必要があります。

エミュレータを実行したまま、別ターミナルを開きます。

以下のコマンドを実行し、データをエクスポートします。


firebase emulators:export ./emulators_data

次の起動時に、エクスポートしたデータを読み込むときは以下のコマンドを実行します。


firebase emulators:start --import ./emulators_data

ここで上記2つのコマンドを毎回やるのは大変ですので、インポートとエクスポートを同時に実行できるようにします。

以下のコマンドを実行することで、エクスポートとインポートが同時にできるので、データ保持を意識せずFirestoreを使えます。


firebase emulators:start --import ./emulators_data --export-on-exit

最後はFlutterに、ローカルのFirestoreを読み込む処理を追加します。


void main() async {
    // Firebaseを初期化
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform,
    );
    // ローカルのFirestoreを読み込む
    if (kDebugMode) {
        try {
            FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
            debugPrint('Use local emulator.'); } catch(e) {
            print(e); }
    }
    runApp(const MyApp());
}

lib/main.dartに、エミュレータ起動時のコードを加えます。