Creating Slowly App UI with Flutter (Part 3)

Our aim is to create the UI of an application called Slowly:

In part 2, we implemented the UI up to the following point:

Now we have to create multiple letters and put them in a list that scrolls horizontally. This can be done using the ListView class.

At times, you may want to create a List that scrolls horizontally rather than vertically. The ListView Widget supports horizontal lists out of the box.

So I created a new function called createLetterList which returns an instance of ListView. Note that we have to always constrain the height of the horizontal ListView. For this purpose, it has been wrapped in a Container to constrain the height of ListView to 200. I have called the createLetter function multiple times to create multiple letter cards:

But in real-world scenarios, we will have a list of letters which have probably been populated by calling a RESTFul API, and then we will iterate through them to populate our ListView. Indeed we have to use some sort of “for loop” to populate our list. That’s where the builder constructor of ListView comes handy (ListView.builder is a named constructor):

The ListView.builder constructor has two important parameters:

1. itemCount: Number of items in the list. This would usually be set to the length of your list of data.
2. itemBuilder: The anonymous function assigned to this parameter, will be called for “itemCount” number of times. In the example above, it will be called 5 times, and each time the index parameter will increase from 0 to 4. This index could be used to read the appropriate item from our list of data and create our letter based on the new data. In our example, I have not used the index parameter and therefore all letters look the same. Look at the result:

As you can see in the model UI that we want to achieve, there is some space before the first letter in the list. How could we create that space? I think the SizedBox widget could be useful here. This widget can always be used to add some space before, between or after widgets. So I am thinking to myself, if we added an empty widget of specific width as the first child of our list, we would create our desired space before the first letter. Therefore in our builder, I will check the value of index. If it is equal to “0”, it means that we are creating the first item of the list, which we need to be an empty SizedBox of a specific size.

We also need to add some space between the list of letters, and the “Recently Received” text widget. Again I will do this by adding a SizedBox with a specific height between them:

Have you noticed that we need some space/margin to the left of “Recently Received” text? Why won’t you add it yourself? ;) Maybe you could add a SizedBox before it, or maybe you could wrap it in a Container and specify some left-margin for it?

The next widgets to add are an inbox icon, and a text reading “No incoming letters at this moment.”. I’m sure by now you can easily imagine how to add those items. You have to organize them in a Row, and then put the Row in the Column that we have already created.

I grabbed the inbox icon from here. But a more customized version of it could be taken from fluttericon.com.

Finally, let’s add the horizontal line. We simulate the line by creating a container, add some background color to it, and set its height to a small value (e.g 1.5). Then we will set its width to infinity so that it stretches as much as possible, and give some margin to the left and right of it.

Voila! Our page is ready! In the next and last part of this article, we will add tabs to the bottom of the page.