All language subtitles for 9. Flutter Card & ListTile Widgets

Now we can see that our design is really coming together. And it's looking already pretty nice.
1

But this just a few things that look a little bit different for our info sections here, compared to what
2

we initially wanted.
3

And these are really subtle things like maybe a little bit a rounding of the corners, or a little bit
4

of shadow under the white part, to make it feel like it's popping out of the page a little bit. So we
5

can either try and customize what we have to make it look like this, or we can simply use a pre-built
6

widget class called card. And you might have seen this in a lot of the apps that you use from day to
7

day, especially the ones from Google.
8

This is a very very subtly shadowed rectangle and it has a small curve to all four edges, and it has
9

a decent amount of padding so the contents centered on the card.
10

And we can create this really really simply by using the card widget.
11

Let's swap out our containers for a card widget instead.
12

And the first thing that you'll notice is that we have some red lines. And that's because the card widget
13

doesn't actually have a padding property.
14

So let's go ahead and delete the padding that we've set for both of those.
15

But other than the padding, everything else is perfectly valid. Cards have a margin that you can set.
16

It has a child that can contain items inside here.
17

And if I hit save right now, you can see that our info sections, automatically start looking like cards.
18

The only problem is that our cards don't have any padding.
19

So what can we do when we have a widget that doesn't actually have a property that we want to change
20

because padding doesn't exist for card?
21

But, if you look through the Flutter documentation, you might come across something called the padding
22

class.
23

And this is a widget that can be added as a parent to any other widget and it'll give it some padding.
24

And this is how you might use it.
25

So you could have a padding widget as the parent to a card widget.
26

And now you end up with some padding around it.
27

Now the way that you use padding is quite interesting.
28

Let's go ahead and add our padding. And we're going to do it around our row because we're going to pad
29

out our row inside our card.
30

So I'm going to select or put my cursor on the row widget, and I'm going to hold down OPTION or ALT and
31

hit ENTER, to pull up the intention actions menu. And I'm going to select wrap with new widget and that
32

new widget is of course going to be padding. And padding of course has a padding property,
33

and we're going to set it to EdgeInsets.all with 25 points of padding.
34

Now you can see that we have all this massive space around our row.
35

So the padding goes around it's child.
36

It's almost like we're adding a soft blanket around which ever widget it is, that we've wrapped our padding.
37

In our case, that's our row.
38

And so the row now exists inside a 25 point padding.
39

Now, what would you think would have happened had we put our padding around our card instead? Well in
40

that case,
41

we can remove our widget from our row, and we can add it to our card.
42

And you can see that adding padding around widgets is such a common action that you can actually select it
43

in this menu already. And you can select that, and it comes pre-built with a certain amount of padding.
44

So let's change that to 25. And you can see that when the padding goes around the card, it doesn't actually
45

achieve what it is that we wanted, which is to get a slightly larger card with a bit of space between
46

the edges of the card and the actual content.
47

But in this case what's actually happened, is the padding has gone around our card and it almost looks
48

like we've added margins around our card.
49

It's important to remember that when you're adding padding, the child of the padding widget is going to
50

get a blanket essentially wrapped around it and separated from everything else.
51

I'm going to go ahead and delete that padding.
52

And I want to show you that not only can we use the card widget to make our lives easier,
53

we can even get rid of our row widget by using something that's used very commonly with cards in Flutter.
54

And it's used so commonly that they even mention it in the documentation. Whenever you're looking at
55

documentation on the Flutter website,
56

there's usually a section called see also.
57

And this very helpfully points you towards other widgets that are used really commonly with this widget.
58

And here, it points to something called a list tile.
59

And this displays icons and text in a card.
60

Well that sounds pretty much like what we need
61

right?
62

So let's click on it and see what it does.
63

This is a single fixed-height row that typically contains some text as well as a leading or trailing icon.
64

So that sounds like a much more convenient way of implementing all of this. Instead of having our row,
65

we're going to use this list tile instead.
66

So I'm going to cut the row out and I'm going to past it at the bottom for reference. And inside my card,
67

as a child, I'm going to add a list tile. And you can see that list tiles have a number of properties.
68

The leading area which is on the left of that row, the title which is a bit of text that we could put,
69

it could also have a subtitle.
70

And finally a trailing icon. Let's add our list tile, and let's give it a leading widget which is going
71

to be our icon.
72

So I'm going to take all of my icon and I'm going to paste it inside here.
73

So let's get rid of that duplicate comma.
74

And now we can add a title to our list title.
75

And that title is of course going to be our text.
76

So from the bottom part of our text to the top,
77

I'm going to paste that inside here.
78

And now we have a list tile and a piece of text, and we can delete the rest of this.
79

So that's a lot shorter.
80

If you hit save, and you take a look at the results, you can see that it's already got a bit of space
81

between the leading icon and the title.
82

And we've got a little bit of padding around our list tile, and it looks pretty great already.
83

So as a challenge, try and reformat the other list tile so that it does exactly the same thing, and have
84

a look through the documentation for the list tile, to see what other things you can customize about
85

it. The only other thing that we need to change here is this card. And this card currently has a row in
86

it which we're going to remove.
87

So we're going to find the row comment and cut out this row, past it at the bottom in case we need it.
88

And then we're going to add a list tile as the child, and it's going to have a leading widget which is
89

going to be our icon, so icon.
90

Let's put that in here, and delete the extra comma and then it's also going to have a title which is
91

going to be our text widget here.
92

And let's paste that in there. Now we can delete all of this, and we can hit save.
93

Cards, by default, come with a white color. So we can delete this color property without it changing anything
94

about our card.
95

And you can see that we now have this vastly simplified code because we're able to use pre-built widgets
96

that conform to the material design principles. And all we have to do is to figure out which widget to
97

use and how we want to set its properties.
98

And through this, we're able to customize the appearance of these widgets to our liking. All that we have
99

to do now, is to get our column to be centered.
100

So do you still remember how to do that? See if you can challenge yourself to find that out from the
101

column documentation. See if you can figure out how to center our content for our column.
102

Let's head over to our column class. And you might already remember this, from our previous lessons on
103

the column, but one of the most important things that you can set is the cross axis alignment and the
104

main axis alignment. The main axis determines how the children should be placed along the main
105

axis, which in the case of a column, is of course along this axis.
106

So that is the one that we want to make centered.
107

So let's find out where we created our column, and then right underneath it,
108

we're going to add our main axis alignment, and we're going to change it to center.
109

And now, all of our items will get pushed right into the middle, and it starts looking a lot more like
110

a little business card. So now, the final thing that we need to add, is a little line between this section
111

and this section to separate it. And to do that, we're going to add a sized box because this is a really
112

easy way of adding something with a fixed height inside our column. And I'm gonna give it a height of
113

just 20 points. And then, I'm gonna give it a child. And the child is gonna be a horizontal line.
114

So in web design, you have something called the horizontal rule which creates a single horizontal line.
115

But in Flutter, we have something called a divider. And the divider class simply puts a one pixel thick
116

horizontal line, onto our screen.
117

Let's add that as the child. And let's change its color to maybe a nice light teal color.
118

And you can see that we now have this line going from edge to edge.
119

Now what if we want it to be just a little bit shorter?
120

Well, we can actually change the size of our sized box because at the moment, its width is as wide as
121

the screen.
122

What if we change the width, instead to 150 pixels.
123

Now our line gets just a little bit shorter, and it's just enough to separate our top group and our bottom
124

group. So in this module, we explored a number of widgets including layout widgets such as containers,
125

columns and rows, but also customizable widgets such as a circle avatar or the card widget or list tile.
126

And we looked at how we can use the documentation to see what properties of these widgets we can set
127

and customize them to our liking.
128

Finally we also learn about how to use custom fonts and icons to make our design come to life.
129

So now it's truly your time to update this app to make it your own.
130

So personalize it for yourself.
131

Change it to have your details or your job description or whatever it is that you want to change about
132

this. And once you're done,
133

be sure to share it with the community and everybody else who's taking the course along with you,
134

using the hashtBrew. And I look forward to seeing all of your amazing creations.
135

So that's all for me for this module.
136

I'll see you on the next one.