Welcome to the 4th and final post in this series.
PART 1
PART 2
PART 3
In the last 3 posts, we setup Amplify to Work with Flutter,

• Created a Login/Registration Screen
• Sign In With Google
• Created an update profile screen
• Create and Display Posts in real-time

In this post, we'll look at how to create and display comments for a post in real time.

Comment

Everything concerning the Comment entity is in this branch Comment Branch.
Please grab it and follow up.
We want users to be able to leave comments and any post they like.
Remember that post and comment entity share a one to many relationship.
With that said, let's see how the code looks like.

createComment function

  Future<bool> createComment(String userId,Post post) async{
    loading = true;

    try {


      Comment comment = Comment(commentText: commentController.text.trim(),userId: userId,
          postID:post.id,post: post,createdOn: TemporalDateTime.now(),  updatedOn: TemporalDateTime.now());

      await Amplify.DataStore.save(comment);
      loading = false;
      return true;
    }catch(ex){
      print(ex.toString());
      loading = false;
      return false;
    }
  }

When creating a comment, we need to understand that, firstly, a comment is made by a user. So we need the userId of that user to identify them as the creator of that comment.
Secondly, a comment is made on a post. Many comments can be made on a single post.
We need to identify the post, the comment was made on. So we add the post Object and postId to the comment object.
Finally, we call await Amplify.DataStore.save(comment) to save the comment object to the datastore.

queryAllCommentsForPost We should be able to display all the comments made under a particular post, lastest first.

 Future<List<Comment>>queryAllCommentsForPost(String postId) async{
    List<Comment> comments= await Amplify.DataStore.query(Comment.classType,
        where: Comment.POSTID.eq(postId),
        sortBy: [Comment.CREATEDON.descending()]);

    print("comments are "+comments.toString());
    return comments;
  }

Real Time Comments

It won't be fun, if we can't see the comments being added to our listview in real-time, would it?
Similar to what we did in the post section, here's how the code looks like

 commentStream = Amplify.DataStore.observe(Comment.classType).listen((event) {
    if (commentsRepo.comments.isEmpty) {
      commentsRepo.comments.add(event.item);

    }else{
      if (commentsRepo.comments[0].id != event.item.id) {
        commentsRepo.comments.insert(0, event.item);
        print('Received event of type ' + event.eventType.toString());
        print('Received post ' + event.item.toString());
      }
    }

  });

Subscriptions fire off multiple times. We don't want to save multiple copies of the same comment in our listview.
So firstly, if the list object is empty, we just add a comment item to it.
If it's not empty, then we check to see if there is already that same comment item. If there isn't, we add the comment to the first position in the list.

Conclusion

For this series, I'll end here. But that doesn't mean you should too. There are still a lot of components or features you can add.

• Post Likes
• Comment Replies and Likes
• Push Notifications
• Notification Screen
• Subscriptions
• etc. You learn by doing. So I urge you to please improve upon this code.
  Add these features and tag me on twitter. If you learned a thing or two, please leave a like or comment. I'll greatly appreciate it.
  Take Care
  Happy coding ✌🏾