Creating Slowly App UI with Flutter (Part 2)

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

In part 1 we started building the application and created our widget tree up to this point:

Now let’s continue by creating one of those letter boxes. Any of those letters could be created using the Card class. Let’s create another function named createLetter to build one of those cards for us. This card will contain a Column of widgets:

As you can see, the Card widget sizes itself to the width and height of its child. So let’s adjust the height and width of the card. There might be several ways to adjust the size of a widget. Here I choose to wrap the Card in a SizedBox to give it a new height (200) and width (150):

Now let’s add the double check mark and the stamp to the letter. Those are just static images. Follow the steps mentioned in part 1 of this article to include them in your project. When displaying a static image, make sure you specify either a height or width for it, otherwise, it might be shown larger than you expect.

Either the width and height arguments should be specified, or the widget should be placed in a context that sets tight layout constraints. Otherwise, the image dimensions will change as the image is loaded, which will result in ugly layout changes.

Note that I created another helper function called createLetterHeader again just to make the code more readable. Here is the result:

Now we have to add the double checkmark icon next to the stamp. For that purpose, we will use the Row widget, which is useful for placing widgets horizontally next to each other:

OK, now we need to add some space between the checkmarks and the stamp. This can be done using the mainAxisAlignment parameter. While I set it to spaceBetween, you could play with other values like spaceAround and spaceEvenly to see the difference. I also set the value of crossAxisAlignment to start so that both images stick to the top of the Row.

The result:

The stamp and the double checkmark icons need some margin around them. Let’s give them some margin by wrapping each of them in a Container class.

We will also give some margin to all four sides of the letter text:

Now at the bottom of the Card, the author name and date of the letter are centered (do you remember why? because they are in a Column and the children of a Column are center-aligned by default), but we need them to be left aligned. To do so, modify the cross-axis alignment of the column:

And also give some margin to the left of them:

The result is quite satisfying:

Now that the letter Card is ready, it’s time to put it in a horizontally scrollable list. We will do that in part 3 of this article!