FlutterでFirebase実装

はじめに

今回は、アプリ制作の過程でリモートデータベースを使用したいと思い、もともと気になっていたFirebaseの勉強をしようと思いました。
今回は、Firebaseでデータベースを作成し、Flutterでデータを取得するまでを記事にしようと思います。

環境

• M2 MacBook Air 14.6.1
• Flutter 3.24.3

Firebaseの設定

1. 上のFirebaseホームページにアクセスし、右上のGo to consoleをクリック
   　

2. 「Firebaseプロジェクトを使ってみる」を押す
   　

3. プロジェクト名を記入し、以下のチェックマークに印をつける。
   　
   
   　

4. 住んでいる国や諸々の情報を記入し、プロジェクトを作成します。
   　

5. 黄色で囲んだボタンを押します。
   　
   
   　

6. 画面の指示に従い、FlutterアプリにFirebaseを実装する。
   　

7. pubspec.yamlに以下の依存関係を追加

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8

  //ここから追加
  firebase_core: ^3.8.1
  cloud_firestore: ^5.5.1
  //ここまで追加

Firebaseでデータベースを作成する。

1. 左のFirestore Databaseを開きます。
   　
2. 「データベースを作成」を押します。
   • 　本番環境ではなく、テスト環境を選ぶ

　
3. 「コネクションを開始」を押し、以下の項目を入力する。(自分が入力したもの)

• コレクションID：posts
• ドキュメントID：自動生成
• フィールド：text
• 値：初めてのポスト

実際のコード

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

void main() async{

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


    //firebaseからデータを取得する
    void _fetchFirebaseData() async{
    await FirebaseFirestore.instance.collection("posts").get().then((event) {
      for(var doc in event.docs) {
        print("${doc.id}=>${doc.data()}");
      }
    });
    }



    floatingActionButton: FloatingActionButton(
        onPressed: _fetchFirebaseData,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
    ),

解説

WidgetsFlutterBinding.ensureInitialized();
・runAppを呼び出す前に非同期処理をする際に使用する

　
options: DefaultFirebaseOptions.currentPlatform,
・現在のプラットフォーム（iOS、Android、Webなど）に適したFirebase設定を提供します。これにより、プラットフォームごとに異なるFirebase設定を簡単に適用できます。
　
　
・FirebaseFirestore.instance.collection("posts")：Firestoreのインスタンスを取得し、posts コレクションを参照します。
・.get()：posts コレクション内のすべてのドキュメントを取得する非同期操作する。
・.then((event)：get() メソッドが完了した後に実行されるコールバック関数を指定します

　
event.docs：Firestoreから取得したドキュメントのリストです。
doc.id：現在のドキュメントのIDを取得
doc.data()：現在のドキュメントのデータを取得。Map形式で返される
　

実行

このプログラムを実行し以下のメッセージがターミナルで表示されれば成功です。
I/flutter ( 6017): jsfRUGfHXgUiAADCndlR=>{text: 初めてのポスト}