Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,520 --> 00:00:06,480
Now let's get started building our final product, which is our business card of sorts,
1
2
00:00:06,490 --> 00:00:15,310
but in an app. Now you can see that the layout, naturally, goes from top to bottom. So the most appropriate
2
3
00:00:15,310 --> 00:00:21,700
layout widget that we're going to be using, is of course, a column. And inside our column, we'll have maybe
3
4
00:00:21,700 --> 00:00:25,990
something that can display an image in a circle,
4
5
00:00:25,990 --> 00:00:33,370
a bit of text that shows our name, a little bit about what we do and then maybe a horizontal line to
5
6
00:00:33,370 --> 00:00:40,390
separate this top part with the bottom part, which are these two sort of material cards if you will, that
6
7
00:00:40,390 --> 00:00:44,200
show our phone number and our contact details.
7
8
00:00:44,200 --> 00:00:47,750
Let's get started making this using what we've just learned.
8
9
00:00:48,010 --> 00:00:53,470
So I'm going to delete everything from the end of the row, where it says here with that comment, all the
9
10
00:00:53,470 --> 00:01:00,070
way to the start of the row. And instead I'm going to have a column.
10
11
00:01:00,160 --> 00:01:04,660
Now, my column of course, needs to have that children parameter.
11
12
00:01:04,660 --> 00:01:09,660
And now I get to specify what children I want inside my column.
12
13
00:01:09,760 --> 00:01:16,320
The first child is going to be something called a Circle Avatar.
13
14
00:01:16,690 --> 00:01:22,390
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
15
00:01:22,390 --> 00:01:29,650
you that if you choose this one, you will get a circle that represents a user, typically used with a user
15
16
00:01:29,650 --> 00:01:33,750
profile image and the image will be cropped to have a circle shape.
16
17
00:01:33,760 --> 00:01:39,100
So even though we're not really building a profile, in this case still makes sense to use this widget
17
18
00:01:39,130 --> 00:01:43,650
so that we get our image automatically filled into a circle.
18
19
00:01:43,930 --> 00:01:50,530
And there's lots of these widgets that the Flutter team have created for common use cases such as building
19
20
00:01:50,530 --> 00:01:53,780
out a user profile or whatever it may be.
20
21
00:01:54,100 --> 00:01:57,350
And we're going to explore some of those already in this module.
21
22
00:01:57,460 --> 00:02:00,940
What are the sort of things that we can put in a circle avatar?
22
23
00:02:00,940 --> 00:02:07,720
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
24
00:02:07,720 --> 00:02:11,250
hit CONTROL + Q, you'll end up with the quick docs.
24
25
00:02:11,770 --> 00:02:19,270
Now the quick docs will show you what are all the things that you can set about this circle avatar, including
25
26
00:02:19,660 --> 00:02:28,870
its background color, its child so something it contains, a background image or a foreground color, or
26
27
00:02:28,870 --> 00:02:35,250
the radius. We're going to keep ours really simple. We're going to give it a radius and it's just going
27
28
00:02:35,250 --> 00:02:36,830
to be 50.
28
29
00:02:36,850 --> 00:02:42,420
So this is gonna show up just as a simple circle with the default blue color.
29
30
00:02:42,430 --> 00:02:46,930
Now, the next thing we're going to change about it, is I don't like it being blue.
30
31
00:02:46,930 --> 00:02:49,930
So what if I wanted to specify a color?
31
32
00:02:49,960 --> 00:02:52,950
So let's give it a background color of it.
32
33
00:02:53,290 --> 00:02:54,690
Let's say red.
33
34
00:02:54,760 --> 00:03:02,560
So I can change all of these properties that I discover through using my quick docs. And depending on
34
35
00:03:02,560 --> 00:03:08,620
what it is that you want to set for the radius or the image, then you can customize your widgets
35
36
00:03:08,620 --> 00:03:17,950
like so. Instead of having a background color, as a challenge, I want you to figure out how you can add
36
37
00:03:18,280 --> 00:03:25,870
a picture of yourself, or an image that you find on the Internet, and you going to set up your assets
37
38
00:03:26,170 --> 00:03:30,160
to be able to display that image inside the circle avatar.
38
39
00:03:30,760 --> 00:03:37,270
So, through the use of quick docs and what you've learned before, try and complete this challenge and
39
40
00:03:37,270 --> 00:03:45,630
see if you can turn it into a circle like this, with your own custom picture. All right I hope you gave
40
41
00:03:45,630 --> 00:03:48,320
that a go and you remembered how to do it.
41
42
00:03:48,840 --> 00:03:55,290
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
43
00:03:55,290 --> 00:04:00,640
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
44
00:04:00,990 --> 00:04:04,290
So I'm just gonna call it Angela and I'm going to keep the extension,
44
45
00:04:04,380 --> 00:04:06,820
in this case the picture is actually a JPEG.
45
46
00:04:06,960 --> 00:04:12,750
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
47
00:04:12,750 --> 00:04:14,410
this images.
47
48
00:04:14,430 --> 00:04:20,420
So now, I'm going to drag and drop my image, into the images folder, and then click OK
48
49
00:04:20,430 --> 00:04:27,420
when I get prompted. At this point, because we got our project off of GitHub, it asks us, whether if we want
49
50
00:04:27,420 --> 00:04:34,680
to track the changes that we're making to this project. And you can go ahead and click yes. Here we've
50
51
00:04:34,680 --> 00:04:39,410
got our image and it's now inside our project under a folder called images.
51
52
00:04:39,420 --> 00:04:46,260
This is the perfect time to go into our pubspec.yaml and clean up a lot of these comments. And then
52
53
00:04:46,260 --> 00:04:49,770
we can go ahead and add in the parts that we need.
53
54
00:04:49,780 --> 00:04:56,760
So remember the comment start with a pound sign or a hashtag if you will, and try to not accidentally
54
55
00:04:56,760 --> 00:05:04,370
delete parts that are not comments like the SDK. Because otherwise, you might end up with some problems.
55
56
00:05:04,380 --> 00:05:10,920
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
57
00:05:10,920 --> 00:05:16,950
So I'm gonna select all of that, and I'm going to hold on COMMAND or CONTROL, and hit the forward slash
57
58
00:05:16,950 --> 00:05:18,210
button.
58
59
00:05:18,210 --> 00:05:24,520
Now remember that our YAML file is really really delicate about how we indent it.
59
60
00:05:24,540 --> 00:05:31,220
So the assets has to be on the same line as the user's material design, because it is a child of our
60
61
00:05:31,230 --> 00:05:32,510
Flutter settings.
61
62
00:05:32,790 --> 00:05:39,000
And then, the image that we want is gonna be indented by two spaces. So you can hit the space-bar twice
62
63
00:05:39,060 --> 00:05:42,280
or hit the tab button if you want to.
63
64
00:05:42,300 --> 00:05:45,410
Now inside our images folder,
64
65
00:05:45,450 --> 00:05:48,080
I've got an image called angela.jpeg
65
66
00:05:48,150 --> 00:05:54,570
Now yours might be called something else, and then we're going to run packages.get to add those images
66
67
00:05:54,660 --> 00:05:56,500
to our project.
67
68
00:05:56,550 --> 00:06:01,880
So now, we're ready to change our circle avatar. Instead of having a background color,
68
69
00:06:01,890 --> 00:06:09,600
we're going to have a background image instead. And our image is going to be an asset image, and the name
69
70
00:06:09,600 --> 00:06:21,000
of the image is of course images/angela.jpeg Let's hit save, and we should see our image show
70
71
00:06:21,000 --> 00:06:23,960
up in our little circle avatar here.
71
72
00:06:23,970 --> 00:06:25,160
Brilliant.
72
73
00:06:25,230 --> 00:06:27,120
Did you manage to get that right?
73
74
00:06:27,120 --> 00:06:33,870
If you have any trouble with the asset image and also understanding how the pubspec.yaml works,
74
75
00:06:33,870 --> 00:06:40,450
be sure to review the lesson we talked all about how to import images into our project assets, where
75
76
00:06:40,470 --> 00:06:45,610
we go into that in more detail. Now that we've set up our circle avatar,
76
77
00:06:45,850 --> 00:06:50,490
the next step is to add our name to our business card.
77
78
00:06:50,860 --> 00:06:59,140
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
79
00:06:59,140 --> 00:07:04,060
At this stage, you can see that the text shows up in the default layout.
79
80
00:07:04,090 --> 00:07:08,290
So it's just a piece of black text in the default font.
80
81
00:07:08,320 --> 00:07:14,440
It'll just be a piece of small text that's in black, that shows up in our column underneath the previous
81
82
00:07:14,440 --> 00:07:14,900
child.
82
83
00:07:15,550 --> 00:07:18,320
Now, what if we wanted to style it up a little bit?
83
84
00:07:18,340 --> 00:07:23,380
What if we wanted to customize the styling of our text?
84
85
00:07:23,380 --> 00:07:30,010
Well, we can take a look at the piece of text, hit COMMAND + J or CONTROL + Q and see what other things that
85
86
00:07:30,010 --> 00:07:30,910
we can change about it.
86
87
00:07:31,120 --> 00:07:34,270
Well, we can change the data that goes in.
87
88
00:07:34,270 --> 00:07:39,890
So, in our case, it's Angela Yu. We can change the style of it.
88
89
00:07:39,970 --> 00:07:41,590
That seems like what we want right.
89
90
00:07:41,770 --> 00:07:47,890
So we have to set a property called style, and it's going to be of type text style.
90
91
00:07:48,280 --> 00:07:49,300
So let's try that.
91
92
00:07:49,540 --> 00:07:55,120
Let's add the style property, and let's change it to a text style.
92
93
00:07:55,210 --> 00:07:57,660
Now what kind of things can we do with text though?
93
94
00:07:57,670 --> 00:08:03,730
Well Android Studio is very helpful in pointing out we can set the color, the font size, the font weight,
94
95
00:08:03,760 --> 00:08:07,540
font style, letter spacing, all of these things.
95
96
00:08:07,720 --> 00:08:11,350
And let's start by changing the font size.
96
97
00:08:11,540 --> 00:08:16,960
And I'm gonna change it to a 40 point font, and I'm going to hit save
97
98
00:08:16,990 --> 00:08:18,310
so we can see what it looks like.
98
99
00:08:18,430 --> 00:08:20,630
Yeah, that looks pretty good,
99
100
00:08:20,740 --> 00:08:25,720
size wise. And then I'm gonna change the color. I want it to be a white color.
100
101
00:08:26,020 --> 00:08:31,700
So let's write colors.white to get our material palette, and change it to white.
101
102
00:08:32,050 --> 00:08:34,020
Yes looking instantly better.
102
103
00:08:34,090 --> 00:08:39,840
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
104
00:08:39,840 --> 00:08:49,300
to write fontweight.bold. And now let's hit save, and you can see that we now have a bolded piece
104
105
00:08:49,300 --> 00:08:52,140
of text that's going to represent our name.
105
106
00:08:52,210 --> 00:08:58,540
Now the only difference, between how it looks in our project, and how we want it to ultimately look is,
106
107
00:08:58,540 --> 00:09:01,530
that this is a different font.
107
108
00:09:01,690 --> 00:09:09,460
So how can we incorporate our custom fonts into our projects, rather than just using the system default
108
109
00:09:09,460 --> 00:09:10,450
fonts..
109
110
00:09:10,480 --> 00:09:13,660
Well to find out about that, you'll have to head over to the next lesson.
12491
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.