Flutter

【Flutter】get_itとcloud_firestoreで、Firebaseのデータベースを実装する

作成日：2022年04月14日

更新日：2022年04月15日

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

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

Flutter と Firebase を接続します。

dart
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;
    }
  }
}

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

【Flutter】get_itでFirebaseを設定し、ログイン機能を実装する

cloud_firestore をインポートします。

dart
import 'package:cloud_firestore/cloud_firestore.dart';

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

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

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

dart
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 を指定します。

dart
Stream<QuerySnapshot> getBooks() {
}

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

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

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

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

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

dart
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_itとfirebase_serviceをインポートします。

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

FirebaseService の変数を作成します。

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

  FirebaseService? _firebaseService;

initStateを作成し、GetItのgetでFirebaseServiceを呼び出します。

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

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

streamは、_firebaseServiceのgetBooks()を指定します。

builderは、contextとsnapshotを設定します。

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

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

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

snapshotのdataのdocsを指定し、データの一覧を設定します。

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

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

itemCountは、booksのlengthを指定します。

itemBuilderは、contextとindexを設定します。

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

dart
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)),
        ],
      );
    },
  );
}