FlutterFire CLIを使用してfirebase環境を構築する方法

株式会社PentagonにてFlutterエンジニアをしているtsurumiiiです。
この記事はFirebaseの環境をコマンドで構築する「FlutterFire CLI」というものを紹介する記事になります。

【こんな人に読んで欲しい】

Flutter x Firebaseで開発をしている方。

【この記事を読むメリット】

FlutterでFirebaseの環境を今までより容易にできる。

【結論】
今までFirebaseの環境を構築するにはAndroidやiosのフォルダにGoogleService-Info.plistとgoogle-services.jsonの追加やネイティブのコードを追加しないと構築できなかったと思います。
ですが、この記事で紹介する「FlutterFire CLI」を使用すると構築時間が短縮されるので便利な機能だと思いました。

インストール

firebaseを使用するので以下のパッケージをインストールしましょう。

firebase_core: ^1.13.1

FlutterFire CLIはFirebase CLIに依存するので、Firebase CLIを追加していない場合は以下のコマンドを実行しインストールしてください

npm install -g firebase-tools

次にFlutterFire CLIをインストールします。

dart pub global activate flutterfire_cli

Firebase Optionsを生成する

アプリケーションのルートで以下のコマンドを実行してください。

flutterfire configure

実行すると

1. Select a Firebase project to configure your Flutter application with
   (Firebaseプロジェクトを選択する。)
2. Which platforms should your configuration support (use arrow keys & space to select)?
   構成するプラットフォームを選択する。
3. Which ios bundle id do you want to use for this configuration, e.g. 'com.example.app'?
   選択したプラットフォームのidを記入する。
4. lib/firebase_options.dartが生成される

firebase_options.dartの中身には、選択したプラットフォームのapiKeyやappid、projectIdなどが記入されています。

生成されたfirebase_options.dartを Firebase.initialieAppに使用できます。

import ‘firebase_options.dart’;
import ‘package:firebase_core/firebase_core.dart’;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );
 runApp(App());
}

これでエラーなど起きずに立ち上がれば環境構築は終了です。

これだけですと、本当にfirebaseと接続できているのか確認できないので、試しにFirestoreから簡単なデータを取得してみましょう。

Firestoreからデータを取得

Firestoreを使用するので、以下のパッケージをインストールしましょう。

cloud_firestore: ^3.1.10

次にFirestoreのコレクションにcountコレクションを作成しドキュメントを追加しましょう。

ドキュメントのモデルは以下のようにシンプルにしました。

import 'package:freezed_annotation/freezed_annotation.dart';
part 'count.freezed.dart';
part 'count.g.dart';

@freezed
abstract class Count with _$Count {
 factory Count({
   int? value,
 }) = _Count;
 Count._();
 factory Count.fromJson(Map<String, dynamic> json) => _$CountFromJson(json);
}

firestoreからデータを取得する部分のコードを追加します。

import 'package:aufguss_event_app/domain/entities/count/count.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

final countStreamProvider = StreamProvider<Count>((ref) {
 return ref.read(countNotifierProvider).streamCount();
});

final countNotifierProvider = Provider<CountNotifier>((ref) {
 return CountNotifier();
});

class CountNotifier {
 final firestore = FirebaseFirestore.instance;

 Future<void> updateCount() async {
   await firestore
       .collection('count')
       .doc(‘document_id’)
       .update({'value': FieldValue.increment(1)});
 }

 Stream<Count> streamCount() {
   final strem = firestore
       .collection('count')
       .doc('document_id')
       .snapshots()
       .map((event) => Count.fromJson(event.data()!));

   return strem;
 }
}

firestoreから取得する部分はsnapShotsでstreamで取得できるようにしました。
riverpodのstreamProviderを使用してみてます。

取得部分と見た目の実装は以下のようにしました。

class CountPage extends HookConsumerWidget {
 const CountPage({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context, WidgetRef ref) {
   final count = ref.watch(countStreamProvider);
   return Scaffold(
     appBar: AppBar(
       title: Text('FlutterFire cli'),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () {
         ref.read(countNotifierProvider).updateCount();
       },
       child: const Icon(Icons.add),
     ),
     body: count.when(
           data: (count) {
             return Center(child: Text('${count.value}'));
           },
           error: (error, stack) => Text('Error: $error'),
           loading: () => const CircularProgressIndicator(),
         ),
   );
 }
}

右下に表示されるボタンをプラスしていくと、firestoreからほぼリアルタイムで取得できるのが確認できると思います。

これでFlutterFire CLIでのfirebaseの環境構築の確認ができました。

まとめ

FlutterFire CLIはこのように今までの環境構築より容易に構築できるものになっています。
Flavorで環境を分けてFirestoreを使用する場合はfirebase_options.dartを各環境生成し、main-〇〇.dartで呼び出せば環境を切り替えできます。

また、FlutterFire CLIはFirebaseの全ての機能を使えるわけではないので、ドキュメントを確認しながら使用してください。

リンク

FlutterFire CLI