Implementing Syde An online Forum in Flutter (Update 3 : Add Comments to a story)

Repository

https://github.com/enyason/Syde

History

• Implementing Syde An online Forum in Flutter (Update 2 : Post A Story, Retrieve All Stories)

• Implementing Syde An online Forum in Flutter (Update : Authenticate With Google)

• Implementing Syde(An online Forum) in Flutter

New Features

• Add comments to a story
• UI Update

Add comments to a story

Beyond creating a story on the platform, users can also comment on a specific story. This feature which is part of the back-end implementation is Handled by Fire-base.

Implementation

• Create a Comment Object

  class Comment {
  
    String commentBody, commentId, userId, timeStamp;
    Comment({this.commentBody, this.commentId, this.userId, this.timeStamp});
  
    factory Comment.fromMap(Map comment) {
      return Comment(
        commentBody: comment["comment_body"],
        commentId: comment["comment_id"],
        timeStamp: comment["time_stamp"],
        userId: comment["user_id"],
      );
    }
  
    Map<String, dynamic> toMap() {
      return {
        "comment_body": commentBody,
        "comment_id": commentId,
        "time_stamp": timeStamp,
        "user_id": userId
      };
    }
  }
  

  • This class shows a basic structure of the comment object

• Add a Comment

  addComment(){
  
      Map<String, dynamic> data = Comment(
          commentBody: _controller.value.text,
          commentId: "na",
          userId: _user.uid,
          timeStamp: DateTime.now()
              .millisecondsSinceEpoch
              .toString())
          .toMap();
  
      _controller.clear();
      _commentRef.add(data).then((docRef) {
  
  
        _commentRef
            .document(docRef.documentID)
            .updateData({"comment_id": docRef.documentID});
  
        incrementComment(widget.story.storyId);
  
      }
  
      );
      
    }
  

  • This method takes the users message from the text-field and adds it to the lists of comments

• Increment Comment Count

  incrementComment(String docRef) async {
      //use transaction on the fire store instance to prevent race condition
      Firestore.instance.runTransaction((transaction) async {
        //get a document snapshot at the current position
        DocumentSnapshot snapshot =
        await transaction.get(Firestore.instance.collection("all_post").document(docRef));
  
        //increment comment count for the story
        await transaction.update(snapshot.reference,
            {"comment_count": snapshot.data["comment_count"] + 1});
  
      });
    }
  

  • To Keep track of the number of comments, I have a field called "comment_count"
  • This method gets the document reference and increments the number by 1

• Listen to Comment Count

  StreamBuilder(
    stream: Firestore.instance                                             .collection("all_post")                                         .document(document.data.documents[index]                                         ["post_id"]).snapshots(), builder: (BuildContext context,
   AsyncSnapshot snapshot) {
    return Padding(
             padding: const EdgeInsets.only(right: 20.0),
         child: Row(
                      children: <Widget>[
                             Icon(Icons.chat_bubble_outline,
                           color: Colors.grey, size: 18.0),
                              Text(      snapshot.data == null
                                                    ? "0"
                                                    : snapshot
                                                        .data["comment_count"]
                                                        .toString(),
                                                style: TextStyle(
                                                    color: Colors.grey,
                                                    fontSize: 10.0),
                                              ),
                                            ],
                                          ),
                                        );
                                      },
                                    )),
  

  • With the stream builder widget, I listen to the node that carries the "comment_count" filed. With this, there is a real-time update of the number of comments made on a particular story

More UI Layouts

Minor modifications have been made, as specified by my designer. Link to complete UI design https://www.figma.com/file/Rb5CIpYQoOtFI52awQrC6Yo7/SydeTeam

N/B

Other functionalities stated in the GitHub commits are still in a basic structure. As these functionalities are updated to work fully, I will duly write about them.

IMPORTANT RESOURCES

*Github *: https://github.com/enyason/Syde

Road Map

• Authenticate User
• Persisting user post
• Displaying all post
• Detailed screen implementation
• Story Reaction Implementation (like and unlike a story)
• Adding Comments to a story
• Searching all posts
• Providing different layouts
• ToDo for users to track their daily progress
• Push Notifications
• Posts sharing
• Users dashboard
• Searching all users
• Direct Messaging with Users
• ChatGroup
• Bookmarking post

How to contribute?

You can reach me by commenting on this post or send a message via enyasonjnr@gmail.com.
If you want to make this application better, you can make a Pull Request. Github