Flutter のパッケージである get_it と cloud_firestore を使い、Firebase のデータベースの内容を表示します。

まずは、Firebase の Cloud FIrestore でコレクションとフィールドを作成しておきましょう。

image2

Flutter と Firebase を接続します。

import 'package:firebase_auth/firebase_auth.dart';

class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;
  FirebaseFirestore _database = FirebaseFirestore.instance;

  FirebaseService();

  Future<bool> registerUser({
    required String email,
    required String password,
  }) async {
    try {
      UserCredential _userCredential = await _auth
          .createUserWithEmailAndPassword(email: email, password: password);
      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }

  Future<bool> loginUser({
    required String email,
    required String password,
  }) async {
    try {
      UserCredential _userCredential = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      if (_userCredential.user != null) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      print(e);
      return false;
    }
  }
}

詳しくは、過去の内容をご覧ください。

cloud_firestore をインポートします。

import 'package:cloud_firestore/cloud_firestore.dart';

Firestore ののインスタンスを参照します。

class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;
  FirebaseFirestore _database = FirebaseFirestore.instance;

Cloud Firestore の内容を取得するために、getBooks 関数を作成します。

class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;

  FirebaseService();

  Future<bool> registerUser({
    required String email,
    required String password,
  }) async {
    try {
      UserCredential _userCredential = await _auth
          .createUserWithEmailAndPassword(email: email, password: password);
      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }

  Future<bool> loginUser({
    required String email,
    required String password,
  }) async {
    try {
      UserCredential _userCredential = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      if (_userCredential.user != null) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      print(e);
      return false;
    }
  }

  getBooks() {}
}

getBooks 関数は、非同期で複数回処理するので、Stream を指定します。

Stream<QuerySnapshot> getBooks() {
}

Cloud Firestore のどのコレクションを参照するか指定します。

また表示順は、timestamp の新しい順にします。

データベースの内容が変わるたびに更新したいので、snapshot を設定します。

Stream<QuerySnapshot> getBooks() {
  return _database
      .collection('books')
      .orderBy('timestamp', descending: true)
      .snapshots();
}

次に、データベース一覧を表示する画面を作成します。

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(

      ),
    );
  }
}

get_itfirebase_serviceをインポートします。

import 'package:get_it/get_it.dart';
import 'package:test_form/services/firebase_service.dart';

FirebaseService の変数を作成します。

class _LoginState extends State<Login> {
  double? _deviceWidth, _deviceHeight;

  FirebaseService? _firebaseService;

initStateを作成し、GetItgetFirebaseServiceを呼び出します。

@override
void initState() {
  super.initState();
  _firebaseService = GetIt.instance.get<FirebaseService>();
}

一覧を作成するために、StreamBuilderを設定します。

streamは、_firebaseServicegetBooks()を指定します。

builderは、contextsnapshotを設定します。

snapshotdataが存在する場合は一覧を表示し、存在しない場合はインジケータを表示します。

body: SafeArea(
  child: StreamBuilder(
    stream: _firebaseService!.getBooks(),
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.hasData) {

      } else {
        return const Center(
          child: CircularProgressIndicator(),
        );
      }
    },
  ),
),

snapshotdatadocsを指定し、データの一覧を設定します。

if (snapshot.hasData) {
  List books =
      snapshot.data!.docs.map((doc) => doc.data()).toList();

ListViewで一覧を表示させます。

itemCountは、bookslengthを指定します。

itemBuilderは、contextindexを設定します。

フィールドの title と author を指定しましょう。

if (snapshot.hasData) {
  List books =
      snapshot.data!.docs.map((doc) => doc.data()).toList();

  return ListView.builder(
    itemCount: books.length,
    itemBuilder: (BuildContext context, int index) {
      Map book = books[index];
      return Column(
        children: [
          Text(book['title'], style: TextStyle(fontSize: 24)),
          Text(book['author'], style: TextStyle(fontSize: 18)),
        ],
      );
    },
  );
}

では、画面を確認します。

image3

無事、データベースの内容が表示されました。

Cloud Firestore でデータを追加してみましょう。

image4

画面を確認すると、

image5

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

次回は、Firebase のデータベースにデータを追加します。

ブログ一覧