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

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

作成日:2022年04月14日
更新日:2022年04月15日

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

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

image2

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-firebase-login

【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);
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
),
);
}
}

get_itfirebase_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を作成し、GetItgetFirebaseServiceを呼び出します。

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

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

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

builderは、contextsnapshotを設定します。

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

dart
body: SafeArea(
child: StreamBuilder(
stream: _firebaseService!.getBooks(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
),
),

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

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

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

itemCountは、bookslengthを指定します。

itemBuilderは、contextindexを設定します。

フィールドの 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)),
],
);
},
);
}

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

image3

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

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

image4

画面を確認すると、

image5

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

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

flutter-get_it-cloud_firebase-create

【Flutter】get_itとcloud_firestoreで、Firebaseのデータベースにデータを追加する

© 2024あずきぱんウェブスタジオ