Flutter에서 Firestore를 이용한 stream snapshot 사용하기

Firebase firestore 에서 snapshot으로 가져와서 Flutter에서 stream 사용해보기

이번 글에서는 Firestore를 사용하여 Flutter 앱에서 실시간 업데이트를 구현하는 방법에 대해 알아보겠습니다.

1. Firestore 설정
   Firestore를 사용하기 위해서는 먼저 Firebase 프로젝트를 생성하고, 해당 프로젝트의 GoogleService-Info.plist 파일을 프로젝트에 추가해야 해요. 이후 Firestore를 설정해줘요.
2. 데이터 추가 및 업데이트
   Firestore에 데이터를 추가하고 업데이트하는 방법은 매우 간단해요. 먼저 Firestore에 데이터를 추가하고, 해당 데이터를 업데이트해요. 이후 Flutter에서 해당 데이터를 가져와서 화면에 보여주면 됩니다.
3. 실시간 업데이트
   Firestore에서 제공하는 실시간 업데이트 기능을 사용하면, 데이터가 업데이트될 때마다 Flutter 앱에서 자동으로 업데이트됩니다. 이를 위해서는 Firestore의 스트림을 사용하여 데이터를 가져와야 해요. 이후 Flutter에서 해당 스트림을 사용하여 데이터를 업데이트하면 됩니다.

Flutter 코드 (main.dart):

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

//메인함수
void main() {
  runApp(MyApp());
}

//페이지 구현
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firestore Real-time Updates',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Firestore Real-time Updates'),
    );
  }
}

//업데이트 페이지
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

//제목 설정
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
//Firestore 스트림 선언
  final Stream<QuerySnapshot> _usersStream =
      FirebaseFirestore.instance.collection('users').snapshots();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: _usersStream,
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) {
            return Text('Something went wrong');
          }

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

위 코드는 Firestore에서 사용자 데이터를 가져와서 ListView에 보여주는 예제에요. 이제 Firestore에서 사용자 데이터가 업데이트될 때마다 Flutter 앱에서 자동으로 업데이트되도록 코드를 수정해보세요.

이번 글에서는 Firestore를 사용하여 Flutter 앱에서 실시간 업데이트를 구현하는 방법에 대해 알아보았는데요. 이를 통해 Flutter 앱을 보다 반응적으로 만들 수 있습니다. 이제 여러분도 Firestore를 사용하여 멋진 앱을 만들어보세요!