Leaf: Flutter Social Media App — Part 8: Post Page and Comments

Photo by Sergi Kabrera on Unsplash

Hello, good people! Hope you’re having an amazing day. Last time, I talker about refactoring to make developing the app easier and testing simpler.

Today’s topics include

1. Creating the post page where all details of a page will be displayed.
2. Creating a static comment section suing “ListView” and “ExpansionTile”

So, let’s get coding.

Post Page Design Overview

Accessing post page

When a user taps on a “PostCard” widget, the “PostPage” widget will be shown. We’ve already done the navigation part in a previous post.

“PostPage” widget contents

The information related to the “PostCard” widget will be displayed in full details in the “PostPage” widget. There are namely 5 types of contents that are going to be displayed. There are:

1. Image header portion.
2. Textual information like post title, summary, and body.
3. Post statistics like reacts and views.
4. Post author details and follow option.
5. Post comments section and commenting option.

“PostPage” widget tree

PostPage widget tree diagram

Creating “PostPage” widget

Code Snippet

I know I know. The explanation is right up next.

Code Clarification

1. Notice lines 1 through 6. The class “PostPageKeys” is used mainly for one thing. To assign keys to the different widgets of interest. Keys are like IDs for widget. They are used to identify them from all other widgets.
   So, basically when I want to find a specific widget, I can use the assigned key to find it.
2. Next line 17. If you’ve read the post about inherited widget you’d know why this exists. Simply to pass the post data to child widgets. If you’re not sure by what I mean, read about it here.
3. “_NonImageContents” widget has a mixture of public widgets (i.e. widgets saved in other files) and private widgets (i.e. widgets saved in the same file). Among these, “PostTimeStamp” and “PostStats” were created previously. I will create “UserDetailsWithFollow” and “CommentsList” widgets now.

The rest of code should be self-explanatory.

Modifying “UserDetails” widget

Code snippet

Code clarification

Notice that, “UserDetails” now takes a “UserModel” object as a parameter to be constructed. Previously it used to go up the widget tree and use the user information found in “PostModel”. A post has two types of user related information.

1. The user details of the author of post.
2. The user details of the commenter of a post.

“UserDetails” widget should be able to show any user information. That’s why, I’ll pass in a “UserModel” object and this widget will show the information related to that user. Because I’ve added a parameter to the constructor of the widget, I need to pass the required parameter from “PostCard” widget. That can easily be done. So, I’m not giving a code snippet here. Refer to code changes at the end of the post to see how I’ve done it.

Creating “UserDetailsWithFollow” widget

Widgets necessary

1. “UserDetails” widget to show user name, email and picture.
2. “IconButton” widget for implementing follow mechanism
3. Row | Expanded | Container for spacing and styling.

Code snippet

Code clarification

1. Notice lines 20 to 24. I’ve used “UserDetails” to show the user information and used some widgets around it for styling and spacing. Here, “UserDetails” is a public widget.
2. Line 31 shows that I’ve used a button. This button will be used as a mechanism to follow this user. By this user, I mean the user indicated by the object “userData” in line 7. I haven’t implemented the follow function yet. I’ll do so in a future post.

Creating “CommentsList” widget

Basic Design

I want the comment section to be hidden away. A user can view comments by tapping to expand a widget. Meaning, the comment section should be collapsible. It will toggle between expanded and collapsed mode when being tapped.

Comment Model

A comment will have 3 data values which are commenting user details, time of comment posting and the actual text of the comment. I’ve created a “CommentModel” class to create this model.

Because comments are part of a post, “PostModel” needs to have a list of comment data. So I’ve modified “PostModel” to have a list of “CommentModel” objects. Refer to the code changes to see what I’ve done.

Widgets necessary

1. ExpansionTile for implementing the collapsible mechanism.
2. Padding | Container | Column | Divider widgets for spacing and styling.

Code snippet

Code clarification

1. Notice lines 18 to 29. I’ve used the “ExpansionTile” widget to create a collapsible list of comments. Each comment is a “_SingleComment” widget implemented in lines 34 to 67.
2. Notice the way I’ve created the list of comments in lines 22 to 28. I used the function .generate() to create a list. It’s an easy function to understand. Like the name of the function it generates a list. It takes as argument the number of items to generate and a function to create the items. Here, I’ve passed in a lambda function to create the “_SingleComment” widgets.
   If you’re new to Dart and Lambda functions, here’s an article by JAY TILLU that’ll help you learn it quickly.
3. Lines 50 to 53 uses the “UserDetailsWithFollow” widget to show the information of the user who commented.
   See how convenient it is to reuse widgets? It saved us a bunch of time!
4. Notice lines 1 to 6. Unlike before, though this class is used for key generation it is only partially responsible. It only gives the prefixes of the key values.
   There is a reason why I implemented it like this. In a comment section, the same comment widget can appear multiple times. So, the keys assigned to each widget needs to be different. Otherwise I won’t be able to refer to a specific widget later on.
   The idea is simple. Use the prefix with something else to make the key unique. In this case, I’ve used the index value to make them unique. I used the keys in line 25, 51, 56, and 60. See how I’ve done it in these lines.

Running the app

That was a LOT of coding. I’m exhausted and my fingers hurt!

But I gotta know how it looks! So, the moment of truth. Let’s run the app.

Excuse the sucky quality

Summary

We’re done for today. Hurrah!

Today, we’ve learned about the followings:

1. Expansion tiles
2. List creating function called generator
3. Using value keys in widgets

Next post will be about widget tests (yes again.) and integration tests.

Code changes

Visit here to see all the files that were modified.

Important links

1. GitHub Profile
2. Leaf GitHub Repository

Parts of the series

1. Leaf: Flutter Social Media App — Part 0
2. Leaf: Flutter Social Media App — Part 1: Getting started
3. Leaf: Flutter Social Media App — Part 2: Widgets
4. Leaf: Flutter Social Media App — Part 3: Widget Tests
5. Leaf: Flutter Social Media App — Part 4: Creating news feed using ListView
6. Leaf: Flutter Social Media App — Part 5: Orientation, Gestures and Navigation
7. Leaf: Flutter Social Media App — Part 6: Models and Inherited Widgets to Pass Data
8. Leaf: Flutter Social Media App — Part 7: Widget refactoring and testing revisited
9. Leaf: Flutter Social Meida App — Part 8: Post Page and Comments

Support me by

1. Applauding and sharing this article.
2. Following me in GitHub and Medium.
3. Starring the GitHub project.
4. Starting a discussion regarding this project.

Thanks for reading! Hope you have a great day. Happy coding!