[Flutter] firebase 데이터 StreamBuilder로 출력

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:snackparty/screen/add_party_screen.dart';
import 'package:snackparty/screen/party_screen.dart';
import 'package:snackparty/widget/add_party_button.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:snackparty/model/party.dart';

final firestore = FirebaseFirestore.instance;

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

일단 파베 관련 import 할 거를 해줬고

쓸 때 편리하도록 firestore를 미리 만들어줬다.

class _HomeScreenState extends State<HomeScreen> {
  var scroll = ScrollController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('파티 찾기'),
        actions: [
          IconButton(onPressed: () {}, icon: Icon(CupertinoIcons.search)),
          IconButton(onPressed: () {}, icon: Icon(CupertinoIcons.bell_fill))
        ],
      ),
      body: StreamBuilder(
        stream: firestore.collection('party').snapshots(),
        builder: (BuildContext context,
            AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          final docs = snapshot.data!.docs;
          return ListView.builder(
            itemCount: docs.length,
            itemBuilder: (context, index) {
              return GestureDetector(
                child: Row(
                  children: [
                    Container(
                        padding: EdgeInsets.all(8),
                        child: Column(
                          children: [
                            Text(
                                docs[index]['partytitle'] + ' (신청 인원 / 가능 인원)'),
                            Text('00 : 00 ' + docs[index]['place']),
                          ],
                        ))
                  ],
                ),
                onTap: () {
                  Navigator.push(
                    context,
                    CupertinoPageRoute(
                        builder: (context) => PartyScreen(
                              party: Party.fromMap(docs[index].data()),
                            )),
                  );
                },
              );
            },
          );
        },
      ),
      floatingActionButton: AddPartyButton(),
    );
  }
}

본격적으로 화면에 보여주는 부분에서는 StreamBuilder를 사용했다.

stream 에다가 firestore 에서 가져온 party collection 을 가져왔고

docs에다가 snapshot.data!.docs 형태를 넣어줘서 사용했다.

 

결국은 ListView로 보여주도록 했다.

 

클릭하면 각 파티당 상세정보를 볼 수 있어야 해서 GestureDetector 를 사용했고

상세정보 페이지로 넘어갈때 데이터를 넘겨줘야 했는데

이때 넘겨주는 자료 타입이 잘 맞지 않아 고생했다 😭

 onTap: () {
                  Navigator.push(
                    context,
                    CupertinoPageRoute(
                        builder: (context) => PartyScreen(
                              party: Party.fromMap(docs[index].data()),
                            )),
                  );
                },

만들어뒀던 fromMap 함수로 감싸서 해결했다.

역시 개념을 잘 모르고 막 쓰면 한번은 걸리게 되어있다는 걸 다시금 느꼈다...

fromMap fromJson, toJson 

이 개념들은 잘 정리되어있는 게시물이 있길래 올려본다.

https://bebesoft.tistory.com/11

flutter :: 플러터에서 json 사용하기 - 기본편 | json data in flutter