Firebase Firestore의 Flutter ListView

소개

Firebase는 현재 Google이 소유하고 있는 Backend-as-a-Service입니다. Firebase에서 제공되는 많은 서비스가 있습니다. 여기에는 Cloud Firestore, 실시간 데이터베이스, Firebase 인증 등이 포함되지만 이에 국한되지 않습니다.

이 중에서 Cloud Firestore는 Firebase에서 제공하는 최신 데이터베이스 솔루션입니다. 오늘날 모바일 애플리케이션 및 웹 애플리케이션에서 널리 사용됩니다. 이제 Firestore 데이터에서 ListView를 만드는 방법을 살펴보겠습니다.

전제 조건

계속하기 전에 Android 및 iOS 모두에서 Android 및 iOS 및 초기화된 Firebase에 대한 각각의 가이드를 따라 Flutter 애플리케이션에 대한 Firebase 설정을 완료해야 합니다.



Firestore에서 ListView를 표시하려고 할 때 Flutter에는 2가지 옵션이 있습니다. FutureBuider 또는 StreamBuilder 를 사용할 수 있습니다. StreamBuilder를 사용하면 목록의 데이터가 실시간으로 업데이트됩니다. 그럼 2번 옵션으로 가보겠습니다.

코딩 시간!

먼저 Firestore 인스턴스를 가져와야 합니다.

final db = FirebaseFirestore.instance;

이제 이 인스턴스를 사용하여 Firestore 컬렉션을 호출할 수 있습니다.

Firestore에 notes라는 컬렉션이 있다고 가정합니다.



StreamBuilder의 스트림 인수에 db.collection('notes').snapshots를 넣을 수 있습니다.

StreamBuilder(
stream: db.collection('notes').snapshots(),
),

그런 다음 ListView로 계속 진행할 수 있습니다. 그러나 우리가 얻고 있는 스냅샷이 비어 있지 않은지 확인하는 것이 항상 더 나은 아이디어입니다. 그래서 우리도 그것을 확인해야 합니다.

따라서 Snapshot에 데이터가 있으면 ListView를 반환할 수 있습니다. 컬렉션을 호출할 때 얻는 스냅샷은 QuerySnaphot입니다. 따라서 ListView의 자식으로서 이 DocuementSnapshots에서 QuerySnapshot를 매핑할 수 있습니다.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class NoteList extends StatelessWidget {
final db = FirebaseFirestore.instance;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Notes"),
centerTitle: true,
),
body: StreamBuilder<QuerySnapshot>(
stream: db.collection('notes').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
} else
return ListView(
children: snapshot.data.docs.map((doc) {
return Card(
child: ListTile(
title: Text(doc.data()['title']),
),
);
}).toList(),
);
},
),
);
}
}

위의 내용은 이전에 Firebase 콘솔에서 본 참고 목록을 제공해야 합니다.



제안 사항이 있거나 저와 연결하고 싶으시면 [email protected] 에서 저를 찾거나 메일을 보내주실 수 있습니다. 😊