All language subtitles for 8. Adding Material Icons with the Icon Widget

All right.
1

So we've already gotten pretty far. But the next thing that I want to create are these little boxes. These
2

boxes that contain an icon and also a phone number or an email address, whatever it is that you want
3

to show.
4

Now you can use an image asset as an icon. But it's nowhere near as adaptable as simply using an icon
5

widget.
6

And I want to show you how this works.
7

If we collapse both of our text widgets and our circle avatar, then we can see that in our column, we
8

currently have three things, our circle avatar, our text which is our name,
9

and finally, the job title that we have here.
10

So I'm gonna go ahead and add another child and this is gonna be a container. Now inside this container,
11

the only child that it's gonna have is a row.
12

And very often when you're creating user interfaces in Flutter, you'll find yourself embedding rows
13

inside columns or columns inside rows.
14

And this gives you that kind of grid layout pattern that makes your layout really flexible.
15

We're going to have a fourth child which is going to be a row, and this row is going to have a whole
16

bunch of children including an icon. Now an icon is a class that is drawn instead of being shown.
17

So for an image it's simply displayed as is.
18

But for an icon, it's actually drawing all of the sides and the edges onto the screen.
19

What this allows you to do, is you can on the fly for example, change the color of the icon or the size
20

of the icon.
21

And it's so much more flexible than simply just using an image.
22

And by using the material.dart package from Flutter, you already have access to a whole bunch of icons
23

that Google made. So, if you take a look at the documentation for the icons class, icons with an s, you
24

can see that you have all of these icons at your fingertips. And they come from the material design icons.
25

So these are icons that designers at Google actually created, so you can have a consistent theme across
26

apps that are built with the material design look. The way that I prefer to browse icons is actually
27

using a tool called materialpalette.com.
28

And not only is this really good for coming up with really intelligent beautiful color palettes. So for
29

example on the main page, if you select two colors that you quite like, for example teal and yellow, then
30

it'll automatically generate you a eight-color color palette even complete with an accent tone. And you
31

can see it looks really really nice straight up from the get go. And it also has the colors that we've
32

been using so far and gives you their names all in one place.
33

And if you click on them, it'll show you all the various shades that you can tap into.
34

There's also a third tab which are the icons. And it's a really easily searchable place where you can
35

say let's look for an add icon, and it shows you here are all the ones that you could possibly use.
36

And when you find one of them, you can see it has a name.
37

Right.
38

This one's called add_shopping.cart. So I can simply go into my Flutter app and write icons, which
39

is the name of the class that supports material design icons.
40

.add_shopping_cart. And now, almost immediately, you can see that I can add that icon that I found on
41

here to my app. Which is brilliant,
42

if you don't want to spend a lot of time finding or creating or paying for these design resources.
43

Now I mentioned that icons are better than images because they're drawn on the fly.
44

So let me show you what you can do with these icons that you can't do with images.
45

I can for example turn that icon into a much larger icon by simply changing its size property.
46

So let's make it 100, and you can see that almost immediately, my icon becomes super large and the
47

lines get thicker and it scales until infinity.
48

So if I change this to 1000, you'll see that it won't pixelate because it's actually just drawn.
49

All that happens, is that it goes off the screen, and you get these yellow bars as a warning to tell you
50

that there's parts of your content that's not visible to the user. It's completely off the screen but you
51

can see that this icon doesn't become pixelated, whereas if I did that to my image up here.
52

So let's say I make that circle avatar 1000 in its radius. Then you can see that my picture becomes a
53

little bit pixelated. And let's go a little bit more extreme,
54

let's add another zero to that, and now it's completely not interpretable.
55

I can't really tell what that is anymore even though I know it's her.
56

This is the reason why icons are much better because they're vectors, and you can even change their color
57

on the fly.
58

Let's change the color of my icon to that teal color that we've been using. Just save
59

and you can see it now blurs into the background. But if I change that into a 900 shade, and it save, then
60

you'll see it become a much darker teal.
61

And now it's completely visible.
62

So you can change the color of it.
63

You can change the size of it.
64

You can do all sorts of things with these icons that you can't do with images.
65

And this is why they're really really useful inside your app.
66

All right.
67

So the icon that we actually want here is the one called phone.
68

And this one gives us that little phone icon that we can put next to some piece of text.
69

So in addition to the icon, I'm also going to have some text and this is simply going to be a phone number.
70

So +44 123 456 789 for example.
71

And then I'm going to style up my text because at the moment it looks a bit boring.
72

So I'm going to give it a text style. And this is going to have a color which is going to be a dark teal
73

color.
74

So colors.teal.shade900 and then it's going to have a font family of the same one
75

that we've been using which is Source Sans
76

Pro. And we can change the font size to 20 points, and let's hit save and see what that looks like.
77

All right.
78

So that looks pretty nice but it'd be nice if there was a little bit of space between the icon and the
79

text right.
80

Well we know that we are inside a row, and the way that we can easily add space between our children
81

in our rows, is by adding a sized box.
82

So we're going to add a sized box and we're going to give it some dimension in the horizontal axis.
83

Right.
84

Because we're in a row, so it's going to go from left to right.
85

So we'll give it a width, and let's give it a width of maybe 10 points.
86

And that should be enough to separate those out a little bit.
87

Make it look just that bit nicer.
88

So finally I'm going to give my container a color just so that it will show up as a separate piece of
89

information, from the rest of my widgets.
90

So let's give this a color of white, and let's hit save, and now I have to change my icon back into teal
91

so that it's visible. And I can make it come away from the edges of the screen a little bit by adding
92

margin.
93

So a lot of the widgets inside Flutter will have margin or padding as properties that you can change.
94

And they all work exactly the same way as we saw earlier with the columns and the rows.
95

We use edgeinsets and I'm going to add edgeinsets only that are different for the top and bottom and
96

also left and right.
97

So I'm going to use some metric. And I'm going to say that the vertical sides, so the top and bottom, are
98

going to have 10 points of margin and the horizontal is going to have 25 points of margin.
99

Now you can see that our container comes away a little bit from the edges, and it looks just a little
100

bit better. And our container also has padding.
101

So let's add maybe 10 pixels of padding to all four sides. And now we have our little card.
102

Right.
103

As a challenge I want you to create the other container. The one where you have your email address and
104

an email icon.
105

So I want to challenge you to use the Flutter documentation, and also what you learned in this lesson
106

to create that second card. Pause the video, and give that a go now. OK,
107

so we know that we need another container.
108

Right.
109

It's pretty much the same as this one.
110

So let's find out where our container ends.
111

It's right about here.
112

And let's go ahead and collapse it. And then we're going to add another container underneath it.
113

And this one is also going to have the same amount of padding,
114

so that was edgeinsets all with 10 points.
115

And then it's going to have a margin of symmetric margin with 10 on the vertical, and 25 on the horizontal.
116

And finally it's going to have some content and the content is going to be under the child property
117

and it's going to be a row that we want to create.
118

The row is going to have some children. And these children include, one a icon that comes from the icons
119

class. And you can either scroll through this to find an icon that looks right.
120

But in this case it's going to be email. Or you can take a look at the websites that we spoke about earlier
121

on.
122

Now that I have my e-mail icon in there, I'm going to change the styling of that icon to make it look
123

a bit more like the other one.
124

So I have to change its color to teal. And then I get to add my text which can really say anything you
125

want it to.
126

But in my case I'm going to add maybe an email. Let's say angela@email.com. And then I'm going
127

to change its style to have a text style, and maybe we'll go for a font size of 20 to match with the
128

other one, a color of teal 900
129

and the font family is of course also going to be Source Sans Pro. Let's hit save and let's see if we
130

get what we wanted.
131

OK.
132

So we can see that the icon has disappeared.
133

So it's the same color as the background.
134

We've got our text formatted in the same way as the previous one, and all we have to do now is to give
135

our container a white background and it should show up underneath the other one and show us what else
136

is missing.
137

So the only thing that looks odd to me is just a little bit of space between the icon and the text.
138

So to do that we have to add our Sized Box with a width,
139

and that was going to be 10.
140

And now if we hit save, then it's starting to look pretty good. In the next lesson,
141

we're going to finalize this app, and we're gonna make these in those actions a little bit nicer looking
142

using a Flutter widget called card.
143

So for all of that and more, I'll see on the next lesson.