[Flutter] Firestore데이터 읽기

 

컨베이어벨트 - 스트림

수화물 - 이벤트 

경고등 - 구독 

 

스트림은 한번에 끝내는 게 아니라 지속적으로 데이터 기다렸다가 필요한 거 받아서 사용 

 

언제라도 데이터가 도착할 수 있는 경우 스트림을 사용하는 것이 좋음 

 

스트림빌더

- 스트림으로 구독하는 데이터를 받을 수 있음

- 데이터 받을 때마다 리빌드 됨 

 

 

class _CounterState extends State<Counter> {
  final int price = 2000;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stream Builder'),
      ),
      // 제너릭 타입
      // 스트림빌더는 자체적으로 스트림으로 들어오는 데이터 구독을 위한 기능
      body: StreamBuilder<int>(
        initialData: price,
        // 스트림에서 새로운 데이터 받을 때마다 스냅샷에 저장하고 builder 메서드로 새 데이터 반영한 값으로 빌드 
        stream: addStreamValue(),
        // snapshot = 스트림의 결과물
        builder: (context, snapshot) {
          final priceNumber = snapshot.data.toString();
          return Center(
            child: Text(
              priceNumber,
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 40,
              ),
            ),
          );
        },
      ),
    );
  }

  Stream<int> addStreamValue() {
    return Stream<int>.periodic(Duration(seconds: 1), (count) => price + count);
  }
}

 

파이어베이스 홈 -> 파이어베이스 데이터베이스

 

컬렉션 - 폴더 

문서 - 폴더 안의 서류 

 

메세지 컬렉션 안에 또 문서를 만들고 해당 데이터를 넣어줌 

 

 

스트림빌더로 파이어베이스 안에 chat 컬렉션 안에 있는 message 컬렉션의 데이터를 스트림으로 받음

이제 해당 컬렉션 안에 변화가 있으면 캐치해서 리빌드함 

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Chat screen'),
      actions: [
        IconButton(
          // 로그아웃
          onPressed: () {
            _authentication.signOut();
            Navigator.pop(context);
          },
          icon: const Icon(
            Icons.exit_to_app,
            color: Colors.white,
          ),
        ),
      ],
    ),
    body: StreamBuilder(
      // 데이터 가지고 있는 컬렉션 경로
      // snapshot() 해당 스트림에 데이터가 바뀔때 마다 새 벨류 값 전달
      stream: FirebaseFirestore.instance
          .collection('chats/SRH2fpqoUBPTmh11ViV3/message')
          .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 Container(
              padding : EdgeInsets.all(8.0),
              child: Text(docs[index]['text']),
            );
          },
        );
      },
    ),
  );
}

 

 

https://pub.dev/packages/modal_progress_hud_nsn

modal_progress_hud_nsn | Flutter Package

 

로그인 하거나 대기할 때 스피너를 돌릴 수 있는 라이브러리 

 

 

현재 body에 있는 것들을 ModalProgressHUD로 감싸주기 

body: ModalProgressHUD(
  inAsyncCall: showSpinner,
  child: GestureDetector(
    onTap: () {

 

전송버튼 누를 때 true로 만들어서 스피너가 돌도록 

onTap: () async {
  setState(() {
    // 트루가 되니까 스피너가 돌게됨
    showSpinner=true;
  });

 

유저 만들거나 로그인 끝날때는 false로 스피너를 멈추도록 함 

setState(() {
  showSpinner=false;
});