Building WhatsApp Ui with Flutter Part 2 : The Chat List
Previously on Building WhatsApp with Flutter, we created a basic appbar with tabs and navigation. Today, we are going to create the scrolling list of chats using the ListView.builder
The project files for this post will be on my GitHub, feel free to clone, fork and star :)
With the introductions out of the way, here is a screenshot of what we will be building
Setting up the model
Before we build the List, we will build the template for the chat. We start by creating a new folder in the
lib folder called 'model'. In the model folder, create a file called
chat_model.dart. With the file created, we can now start building the structure. We will start by creating the class
Inside this class, we will create the variables for the features we want our chat list to have. WhatsApp usually has the avatar of the person, name, time and snippet of the message.
Create the different variables, assign them to the type string. They are set as final since we will only be setting the value once. If you would like to learn more about the different variable types in dart, click here
Great, with the variables declared, we could now pass it to the class’s constructor
This is done with the following lines of code
Next, we move on to the creating a list of chats. For this, we create a variable called
data which will be of type List. The list will be of type
ChatModel. This ensures that the data entered follows the format laid out in the class.
In the above code, we created seven users with messages. Each model follows the format we created. You can edit this to include as much users as you want. With the template for our chats created, we can now move to the acutal list view.
The list view
To get started, we open
chat_screen.dart and import the file we just created.
Next, we change the widget from Stateless to Stateful
Time to get to the fun stuff, replace
ListView.builder. The ListView allows us to display a scrolling array of widgets onto the screen. It has many different properties but the ones we are going to be using are the
itemBuilder. The itemCount should not be equal to zero. The itemBuilder is used to build the items of the list. It takes a build method that is very similar to that of the Stateful and Stateless widget. The main difference being the addition of an index variable.
Modify ChatScreen from
For our itemCount, we are going to use the length of the data list we created earlier. Simply the value to
Next, we are going to work on the chat item. Inside of itemBuilder, create a new Column. The column is a widget which displays its children in a vertical array.
As you may notice with WhatsApp, there is a thin grey line separating each chat. To mirror this effect, we use the Divider widget. This widget allows us to separate elements on our screen with a line. The height, colour and indent can all be changed, For now, we are just going to set a heigh of 10.0 (the number must be a decimal value).
With the Divider created, we move onto the ListTile. This is another premade Flutter widget which is simple to use yet very powerful. It was different properties such as leading, title and subtitle all ‘baked in’. Under the Divider, we create the widget by typing
Your _ChatScreen class should look like this
First, we start with the Circle Avatar. This is the picture to the left of a message, featuring the user’s picture. This is super simple to create in Flutter. In the list tile, we set the leading property to a new Circle avatar. Then we specify the background colour and background image of the avatar. The background colour can be any colour you like in this example I used grey. For background image, we use a network image. The avatar URL from our data list is passed in. This is done with the following code:
Notice for the NetworkImage, we specify
data[index]. The index being passed is coming from the index created in the itemBuilder. For each iteration, the index will change.
With our avatar created, we change our attention to the username and time/date. Since both of these lie on the same line, we can use a Row widget. This is very similar to the column except instead of being vertically aligned, widgets are aligned horizontally.
title property of the ListTile is used. We set it to a Row containing two Text widgets. One will be the username and the other the time/date. Row also allows us to configure how widgets are spaced and aligned. Using the mainAxisAlignment, set the alignment to
spaceBetween. Now both Text widgets will be aligned to each end of the tile. To create the name and time, add the following lines to the leading property
Again, we use the information from the data list, passing in the index. Also, we use the style property of the Text widget to style them both accordingly.
Finally, the message snippet. For this, we will use the
subtitle property. A container widget is created which will have a 5.0 padding to the top of a Text widget which will be assigned to its child. The Text widget will display the message from the
data list for that user. The index is again passed in. The style of the text is also changed so that there are an increase font size and different colour.
Your file should now look like this
Now if you reload your app, you should see a working, scrollable list of chats.
Today we covered the basics of the list view, played with classes, poked the constructor and brought it all together to create a working List. The code for this project will be up on GitHub, feel free to clone/fork and play around with Flutter for yourself. Once you understand the basics, Flutter is a joy to use and the community around it is very helpful and welcoming to newcomers.
Part 3 of this series will be up after my exams are finished. Most likely sometime in June.
If you have any question, comments or suggestions feel free to message me or leave a comment.