[flutter] http통신을 이용한 데이터 불러오기 맛보기 (firestore)

• firebase에 저장시킨 데이터를 리스트뷰에 뿌려주기위한 방법

---

StreamBuilder 사용

stream 이란?

• 데이터를 가져올때 하나씩 가져오지 않고 여러 개씩 가져올 수 있도록 해주는 일종의 통로 역할을 한다고 생각하면 될 거같음. 계속 주시하고 있다가 변화가 감지되면 바로바로 알아채고 반응하는 느낌..?

---

StreamBuilder 코드

StreamBuilder<QuerySnapshot>(
                stream:
                    FirebaseFirestore.instance.collection('board').snapshots(),
                builder: ((context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator();
                  }
                  return ListView.separated(
                    shrinkWrap: true,
                    itemBuilder: (context, index) => listTitle(
                        snapshot.data!.docs[index]['title'],
                        snapshot.data!.docs[index]['content']),
                    itemCount: snapshot.data!.docs.length,
                    separatorBuilder: (BuildContext context, int index) =>
                        const Divider(
                      height: 1,
                      color: Colors.grey,
                    ),
                  );
                }))

• 스트림빌더를 사용하고 stream으로 파이어베이스 collection에 불러오고 싶은 collection 이름을 적으면 그 데이터들을 불러올 수 있음.

if (snapshot.connectionState == ConnectionState.waiting) {
                    return const CircularProgressIndicator();
                  }

• 데이터가 아직 다 오지 않았으면 circularProgressIndicator로 사용자에게 표시

---

listTitle 코드

Widget listTitle(String title, String content) {
  return Padding(
    padding: const EdgeInsets.all(10.0),
    child: GestureDetector(
      onTap: () {
        print('#########');
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '제목 : $title',
            style: const TextStyle(fontSize: 15.0, color: Colors.black),
          ),
          Text(
            '내용 : $content',
            overflow: TextOverflow.visible,
            style: const TextStyle(fontSize: 15.0, color: Colors.black),
          ),
        ],
      ),
    ),
  );
}

---

데이터를 불러오는건 개인적으로 저장하는것 보다 간단한 것 같다고 느꼈고 전체 데이터를 모델을 생성하면 나중에 유지보수하기 쉽도록 구조를 짜는게 좋을 것 같다.