CODEWITHSUNDEEP
dartflutter
Harsha pulikollu
Harsha pulikollu

Reputation: 2436

How to show data changes locally before it updated and showed up in firestore

I'm following a tutorial for an chat app with flutter and firebase firestore. In that app when user sends a text message to other it's not visible to sender till it's get updated in firestore and then the new data is showing up in the messages list. I want to is it possible to add the newly sent message to the messages list with a clock image indicating that it will update in database and then after it's updated in database then locally added message should be replaced with data from firestore in messages list. Here is snippet of button press to send message...

void onSendMessage(String content, int type) {
    // type: 0 = text, 1 = image, 2 = sticker
    if (content.trim() != '') {
      textEditingController.clear();

      var documentReference = Firestore.instance
          .collection('messages')
          .document(groupChatId)
          .collection('message')
          .document(DateTime.now().millisecondsSinceEpoch.toString());

      Firestore.instance.runTransaction((transaction) async {
        await transaction.set(
          documentReference,
          {
            'idFrom': id,
            'idTo': peerId,
            'timestamp': DateTime.now().millisecondsSinceEpoch.toString(),
            'content': content,
            'type': type
          },
        );
      });
      listScrollController.animateTo(0.0,
          duration: Duration(milliseconds: 300), curve: Curves.easeOut);
    } else {
      Fluttertoast.showToast(msg: 'Nothing to send');
    }
  }

and here is the link to the tutorial Chat app with flutter and firestore

Upvotes: 0

Views: 297

Answers (2)

Norej Udeisa
Norej Udeisa

Reputation: 1

I used a cloud function to achieve this. I have a field isSent on my message and it's initially false, when the message gets created in firestore, I then update the isSent field using the cloud function and that automatically rebuilds the UI. It's not very fast and accurate, but much better than none

Upvotes: 0

Soundbytes
Soundbytes

Reputation: 1249

This shouldn't be too difficult to achieve. Currently any new chat message is sent to the Firestore database upon submission. You just need to extend the onSubmit function that does it (it probably has another name in your code example) to also add the message temporarily to the local message list.

Once you receive the update from the database you just have to remove the temporary message from the list since it will be replaced with the contents from the database. Include the progress indicator with the temporary message and you're done.

If you need a more detailled answer please add some code to your question (ideally together with a link to the original tutorial. Note: When providing a link to an external page make sure that you question is still complete should the link go dead.)

Upvotes: 0

Related Questions