All language subtitles for 6. Tapping into Widget Properties

Now let's get started building our final product, which is our business card of sorts,
1

but in an app. Now you can see that the layout, naturally, goes from top to bottom. So the most appropriate
2

layout widget that we're going to be using, is of course, a column. And inside our column, we'll have maybe
3

something that can display an image in a circle,
4

a bit of text that shows our name, a little bit about what we do and then maybe a horizontal line to
5

separate this top part with the bottom part, which are these two sort of material cards if you will, that
6

show our phone number and our contact details.
7

Let's get started making this using what we've just learned.
8

So I'm going to delete everything from the end of the row, where it says here with that comment, all the
9

way to the start of the row. And instead I'm going to have a column.
10

Now, my column of course, needs to have that children parameter.
11

And now I get to specify what children I want inside my column.
12

The first child is going to be something called a Circle Avatar.
13

And you can see that if you hover on this and wait for it, it'll show you the quick docs. And it tells
14

you that if you choose this one, you will get a circle that represents a user, typically used with a user
15

profile image and the image will be cropped to have a circle shape.
16

So even though we're not really building a profile, in this case still makes sense to use this widget
17

so that we get our image automatically filled into a circle.
18

And there's lots of these widgets that the Flutter team have created for common use cases such as building
19

out a user profile or whatever it may be.
20

And we're going to explore some of those already in this module.
21

What are the sort of things that we can put in a circle avatar?
22

Well, if you click on the circle avatar, and if you're on a Mac, if you hit CONTROL + J, or if you're on Windows, you
23

hit CONTROL + Q, you'll end up with the quick docs.
24

Now the quick docs will show you what are all the things that you can set about this circle avatar, including
25

its background color, its child so something it contains, a background image or a foreground color, or
26

the radius. We're going to keep ours really simple. We're going to give it a radius and it's just going
27

to be 50.
28

So this is gonna show up just as a simple circle with the default blue color.
29

Now, the next thing we're going to change about it, is I don't like it being blue.
30

So what if I wanted to specify a color?
31

So let's give it a background color of it.
32

Let's say red.
33

So I can change all of these properties that I discover through using my quick docs. And depending on
34

what it is that you want to set for the radius or the image, then you can customize your widgets
35

like so. Instead of having a background color, as a challenge, I want you to figure out how you can add
36

a picture of yourself, or an image that you find on the Internet, and you going to set up your assets
37

to be able to display that image inside the circle avatar.
38

So, through the use of quick docs and what you've learned before, try and complete this challenge and
39

see if you can turn it into a circle like this, with your own custom picture. All right I hope you gave
40

that a go and you remembered how to do it.
41

But here on my desktop, I've got a picture of myself and I'm going to rename it to make my life a little
42

bit easier later on so I don't have to type out all of that when I try to add my picture to my code.
43

So I'm just gonna call it Angela and I'm going to keep the extension,
44

in this case the picture is actually a JPEG.
45

Then I'm gonna go into my photo project and I'm going to create a new directory, and I'm going to call
46

this images.
47

So now, I'm going to drag and drop my image, into the images folder, and then click OK
48

when I get prompted. At this point, because we got our project off of GitHub, it asks us, whether if we want
49

to track the changes that we're making to this project. And you can go ahead and click yes. Here we've
50

got our image and it's now inside our project under a folder called images.
51

This is the perfect time to go into our pubspec.yaml and clean up a lot of these comments. And then
52

we can go ahead and add in the parts that we need.
53

So remember the comment start with a pound sign or a hashtag if you will, and try to not accidentally
54

delete parts that are not comments like the SDK. Because otherwise, you might end up with some problems.
55

So I'm also going to delete all of this but I'm going to go ahead and add my image asset in here.
56

So I'm gonna select all of that, and I'm going to hold on COMMAND or CONTROL, and hit the forward slash
57

button.
58

Now remember that our YAML file is really really delicate about how we indent it.
59

So the assets has to be on the same line as the user's material design, because it is a child of our
60

Flutter settings.
61

And then, the image that we want is gonna be indented by two spaces. So you can hit the space-bar twice
62

or hit the tab button if you want to.
63

Now inside our images folder,
64

I've got an image called angela.jpeg
65

Now yours might be called something else, and then we're going to run packages.get to add those images
66

to our project.
67

So now, we're ready to change our circle avatar. Instead of having a background color,
68

we're going to have a background image instead. And our image is going to be an asset image, and the name
69

of the image is of course images/angela.jpeg Let's hit save, and we should see our image show
70

up in our little circle avatar here.
71

Brilliant.
72

Did you manage to get that right?
73

If you have any trouble with the asset image and also understanding how the pubspec.yaml works,
74

be sure to review the lesson we talked all about how to import images into our project assets, where
75

we go into that in more detail. Now that we've set up our circle avatar,
76

the next step is to add our name to our business card.
77

And so I'm going to add a text widget. And the text it's going to contain, is simply going to be my name.
78

At this stage, you can see that the text shows up in the default layout.
79

So it's just a piece of black text in the default font.
80

It'll just be a piece of small text that's in black, that shows up in our column underneath the previous
81

child.
82

Now, what if we wanted to style it up a little bit?
83

What if we wanted to customize the styling of our text?
84

Well, we can take a look at the piece of text, hit COMMAND + J or CONTROL + Q and see what other things that
85

we can change about it.
86

Well, we can change the data that goes in.
87

So, in our case, it's Angela Yu. We can change the style of it.
88

That seems like what we want right.
89

So we have to set a property called style, and it's going to be of type text style.
90

So let's try that.
91

Let's add the style property, and let's change it to a text style.
92

Now what kind of things can we do with text though?
93

Well Android Studio is very helpful in pointing out we can set the color, the font size, the font weight,
94

font style, letter spacing, all of these things.
95

And let's start by changing the font size.
96

And I'm gonna change it to a 40 point font, and I'm going to hit save
97

so we can see what it looks like.
98

Yeah, that looks pretty good,
99

size wise. And then I'm gonna change the color. I want it to be a white color.
100

So let's write colors.white to get our material palette, and change it to white.
101

Yes looking instantly better.
102

The last thing I'm gonna do, is I'm going to make it bold. So I'm going to write font weight, and I'm going
103

to write fontweight.bold. And now let's hit save, and you can see that we now have a bolded piece
104

of text that's going to represent our name.
105

Now the only difference, between how it looks in our project, and how we want it to ultimately look is,
106

that this is a different font.
107

So how can we incorporate our custom fonts into our projects, rather than just using the system default
108

fonts..
109

Well to find out about that, you'll have to head over to the next lesson.