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
ListViewWidget 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):
ListView.builder constructor has two important parameters:
itemCount: Number of items in the list. This would usually be set to the length of your list of data.
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
indexparameter 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.
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.