虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

FlutterのStreamBuilderを使ってCloud Firestoreの変更を監視する

f:id:superman199323:20181109182653j:plain

FlutterのStreamBuilderを使ってCloud Firestoreの変更を監視する

Firestoreの変更を監視できます。

例えばチャット機能とかで有効です。

導入

まずはFirestoreをFlutterと導入しましょう。

www.shogogeek.com

実装

今回はチャット機能を例にあげて説明していく。

まずはFirestoreからデータを取得する。

  • 取得するメソッド
Stream<QuerySnapshot> getMessages(String groupId) {
    return Firestore.instance
        .collection("group")
        .document(groupId)
        .collection("message")
        .orderBy("created_at", descending: true)
        .snapshots();
  }

この実装ではメッセージを作成日から降順で取得している

  • 呼び側
            StreamBuilder(
                //  stream属性にメソッドを呼ぶ
                stream: helper.getMessages(groupId).asBroadcastStream(),
                builder: (context, snapshot) {
     // データを取得できたらここが呼ばれる
                  if (snapshot == null || snapshot.data == null)
                    return Container();
                  return new ListView.builder(
                    padding: new EdgeInsets.all(8.0),
                    reverse: true,
                    itemBuilder: (_, int index) {
                      var messageData = snapshot.data.documents[index];

                      if (messageData == null) return Container();
                      return _ownMessageLayout(messageData);
                    },
                    itemCount: snapshot.data.documents.length,
                  );
                }),
          ),

StreamBuilder のStream属性にStreamを返すメソッドを作成してデータを返せばリアルタイムでデータの更新を監視することができる

www.youtube.com