[flutter] 클라우드 파이어스토어에서 플러터로 데이터 가져오기

15 Dec 2023

flutter

플러터(Flutter) 앱에서 클라우드 파이어스토어(Firebase Cloud Firestore)로부터 데이터를 가져오는 것은 매우 중요합니다. 클라우드 파이어스토어는 NoSQL 데이터베이스이며, 플러터에서는 해당 데이터베이스를 쉽게 사용할 수 있습니다. 이 글에서는 플러터 앱에서 클라우드 파이어스토어에서 데이터를 가져오는 방법을 살펴봅니다.

1. 플러터 프로젝트에 Firebase 추가

먼저, 플러터 프로젝트에 Firebase를 추가해야 합니다. 이를 위해서는 pubspec.yaml 파일에 firebase 관련 패키지를 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  cloud_firestore: ^3.2.0

그리고 Firebase Console에서 프로젝트를 생성하고, google-services.json 파일을 프로젝트에 추가해야 합니다.

2. 데이터 가져오기

이제, 데이터베이스에서 데이터를 가져오는 코드를 작성할 차례입니다.

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance.collection('users').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text('Loading...');
        }

        return ListView(
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data = document.data() as Map<String, dynamic>;
            return ListTile(
              title: Text(data['name']),
              subtitle: Text(data['email']),
            );
          }).toList(),
        );
      },
    );
  }
}

위 코드에서, FirebaseFirestore.instance.collection('users').snapshots()를 이용하여 ‘users’ 컬렉션의 데이터를 받아오고, 이를 StreamBuilder 위젯을 통해 화면에 표시합니다.

위 코드를 통해, 플러터 앱에서 클라우드 파이어스토어로부터 데이터를 쉽게 가져올 수 있습니다.

결론

이제, 플러터 앱에서 클라우드 파이어스토어로부터 데이터를 가져오는 방법을 배웠습니다. 이를 통해 효율적으로 데이터를 관리하고, 사용자에게 보여줄 수 있습니다. 클라우드 파이어스토어는 플러터 앱의 데이터 관리를 손쉽게 도와주는 강력한 도구입니다.

참고 자료

제작자: Firebase 공식 블로그