flutter 플러터 firestore에서 데이터 읽어오기

1. 모델 생성

QuerySnapshot 데이터를 읽어올때, 원하는 오브젝트 형태로 가져오게 함. (Category 오브젝트 타입으로 파이어스토어에 data writing된 상태)

class HomeModel {
  final Stream<QuerySnapshot<Category>> categoriesStream = FirebaseFirestore.instance
      .collection(Constants().categories)
      .withConverter<Category>(
        fromFirestore: (snapshot, _) => Category.fromJson(snapshot.data()!),
        toFirestore: (category, _) => category.toJson(),
      )
      .snapshots();
}

 

2. 출력을 원하는 위젯에서 StreamBuilder로 감싸기

원래는 Wrap 위젯이었음. 

 

3. snapshot 데이터에 대해 예외처리 추가해주고, 아래 text 출력하는 부분에서 실제 데이터 뽑아내서 출력

StreamBuilder<QuerySnapshot<Category>>(
              stream: model.categoriesStream,
              builder: (context, snapshot) {

                if (snapshot.hasError) {
                  return const Text('Something went wrong');
                }

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

                List<Category> categories = snapshot.data!.docs.map((e) => e.data()).toList();

                return Wrap(
                  direction: Axis.horizontal, //나열 방향
                  alignment: WrapAlignment.start, //정렬방식
                  spacing: 5, //좌우간격
                  runSpacing: 5, //상하간격
                  children: <Container>[
                    for(var i = 0; i<categories.length; ++i)
                      ...[
                        Container(
                          padding: const EdgeInsets.all(6),
                          decoration: BoxDecoration(
                            color: const Color(0xffdddddd),
                            borderRadius: BorderRadius.circular(6),
                          ),
                          child: Text('#${categories[i].name}'),
                        ),
                      ],
                  ],
                );
              }
            ),