Flutter UI Widgets

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

The rest of this course will focus on building a newsreader app. In this episode, we'll combine what we've learned so far to build an article card widget. After that, the previous code in the main page widget and the body currently returns an article card widget. To open up the widgets definition, click on it and press the F12 key. This file is contained inside the widgets folder. This folder would contain custom widgets that can be used in multiple places. The article card is a stateless widget that currently returns an empty container. This widget will be used to display an individual article. For this, I've created a model and some sample data. Head over to article.dart file inside the models folder. Here, you can see the article class and its members and below it, you have the list of articles. We'll be using this article's variable to access the data. Now, close the file and head back to article card widget. Add the article property like so. This exposes the article member and the constructor as a named parameter. So, we can pass an article when using this widget. We also added the required keyword to make sure we pass an article to the card. Head over to main_page.dart file. And you can see it currently complains that it expects a required argument. Now, go ahead and pass a single article from the articles list and make sure you remove the const keyword because this class is no longer a constant value. This passes the first index from the articles list to the named parameter called article. Save this file and head back to the article card class. Okay, now, replace the container with the following code. First, return a card widget with a margin of 16 and an elevation of four. The elevation is used to create depth by adding a shadow underneath the card. The card has a column widget as its child. And remember, columns are used to arrange items in a vertical order. The column would have a banner and a detail region below it. First, let's go ahead and create the card detail widget. I'll comment out the card banner widget and then paste the following code below the article class. And update the call to this widget by passing in the article argument like so. Now, save your work. I noticed that the UI doesn't show up and this could be a sign that we have an error. Go ahead and open up the debug console by pressing control, shift, Y on Windows and command, shift, Y on Mac. And consider, we need to do a hot restart. Go ahead and do that now. And you can see, the UI displays as expected. Now, you should be familiar with this type of code, but I'll explain some little additions to it. This creates a widget that accepts an article as an argument. It returns a padding with a padding of 16. The padding widget is used here instead of a container and that's simply because we only want to add a padding. This child is a column with the title text, a sized box and a row. The text is given a max line of two which limits the text to span two lines. If the text is longer than two lines, the overflow will be represented by an ellipsis. Next is a sized box with a height of 16. This widget is an empty box used to add a fixed percent between the top and bottom children of the column. And finally we have the row. And this row has three children. The first is the source text and the last child is the comments text. And in between them is a spacer widget. This widget adds an empty space between flex widgets. Currently, it takes all the available space in between the other two children. And by the way, like I said earlier, both the column and row are example of flex widgets, since they don't have a fixed width and height and flex to take up the space available to them. Now, an alternative way of achieving the same effect with the spacer would be to remove the spacer and rub the first child of the row with an expanded widget. And if you notice, the card currently stretches from the top to the bottom of the available space. To correct this, head over to the main page widget and place the article card widget inside a column. And this corrects it by limiting the height of the cards to its content. Let's head over to the article card class and create the card border. This widget would display an image. First, uncomment it where it is called inside article card widget. Then scroll down and enter the following code. And make sure you remember to add the const keyboard the way it is called. And this is because we are not passing any dynamic properties yet in this class. Now, save your work and you should see the changes. We intend returning an image, but since we are not yet ready to code it up, a placeholder widget is returned with the expected dimensions. Then, whenever we want to add the image, we'll simply replace this widget with an image and be rest assured that our UI won't break. A very handy widget indeed. Finally, let's add a bookmark icon at the top right corner of the article card. For this, we'll be using a stack widget and as its name suggests, it angles widgets on top of each other. Now, go ahead and wrap the placeholder widget with the stack and update your code as follows. Save your work. You can see that a bookmark icon is placed at the top right corner of the placeholder widget. Okay, let's break down what's going on here. The stack picks a list of children. The first child is the base of the stack and any other widget is placed on top of it. The bookmark icon as the next child, so it is placed on top of the placeholder widget. And this structure continues in that order. So, the arrangement of the children is very important. And a good example of a stack layout is a stack of playing cards. Last in, first out or last in, first seen. Next, to position the icon where we want it inside the stack, we used a position widget. We set this top and right distance to ten. This aligns the icon to the top right corner and inserts it on both the top and the right edges of the stack by a value of ten. We need to replace the placeholder with an image. Let's do that in the next episode.