Now let's get started building our final product, which is our business card of sorts,
but in an app. Now you can see that the layout, naturally, goes from top to bottom. So the most appropriate
layout widget that we're going to be using, is of course, a column. And inside our column, we'll have maybe
something that can display an image in a circle,
a bit of text that shows our name, a little bit about what we do and then maybe a horizontal line to
separate this top part with the bottom part, which are these two sort of material cards if you will, that
show our phone number and our contact details.
Let's get started making this using what we've just learned.
So I'm going to delete everything from the end of the row, where it says here with that comment, all the
way to the start of the row. And instead I'm going to have a column.
Now, my column of course, needs to have that children parameter.
And now I get to specify what children I want inside my column.
The first child is going to be something called a Circle Avatar.
And you can see that if you hover on this and wait for it, it'll show you the quick docs. And it tells
you that if you choose this one, you will get a circle that represents a user, typically used with a user
profile image and the image will be cropped to have a circle shape.
So even though we're not really building a profile, in this case still makes sense to use this widget
so that we get our image automatically filled into a circle.
And there's lots of these widgets that the Flutter team have created for common use cases such as building
out a user profile or whatever it may be.
And we're going to explore some of those already in this module.
What are the sort of things that we can put in a circle avatar?
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
hit CONTROL + Q, you'll end up with the quick docs.
Now the quick docs will show you what are all the things that you can set about this circle avatar, including
its background color, its child so something it contains, a background image or a foreground color, or
the radius. We're going to keep ours really simple. We're going to give it a radius and it's just going
to be 50.
So this is gonna show up just as a simple circle with the default blue color.
Now, the next thing we're going to change about it, is I don't like it being blue.
So what if I wanted to specify a color?
So let's give it a background color of it.
Let's say red.
So I can change all of these properties that I discover through using my quick docs. And depending on
what it is that you want to set for the radius or the image, then you can customize your widgets
like so. Instead of having a background color, as a challenge, I want you to figure out how you can add
a picture of yourself, or an image that you find on the Internet, and you going to set up your assets
to be able to display that image inside the circle avatar.
So, through the use of quick docs and what you've learned before, try and complete this challenge and
see if you can turn it into a circle like this, with your own custom picture. All right I hope you gave
that a go and you remembered how to do it.
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
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.
So I'm just gonna call it Angela and I'm going to keep the extension,
in this case the picture is actually a JPEG.
Then I'm gonna go into my photo project and I'm going to create a new directory, and I'm going to call
this images.
So now, I'm going to drag and drop my image, into the images folder, and then click OK
when I get prompted. At this point, because we got our project off of GitHub, it asks us, whether if we want
to track the changes that we're making to this project. And you can go ahead and click yes. Here we've
got our image and it's now inside our project under a folder called images.
This is the perfect time to go into our pubspec.yaml and clean up a lot of these comments. And then
we can go ahead and add in the parts that we need.
So remember the comment start with a pound sign or a hashtag if you will, and try to not accidentally
delete parts that are not comments like the SDK. Because otherwise, you might end up with some problems.
So I'm also going to delete all of this but I'm going to go ahead and add my image asset in here.
So I'm gonna select all of that, and I'm going to hold on COMMAND or CONTROL, and hit the forward slash
button.
Now remember that our YAML file is really really delicate about how we indent it.
So the assets has to be on the same line as the user's material design, because it is a child of our
Flutter settings.
And then, the image that we want is gonna be indented by two spaces. So you can hit the space-bar twice
or hit the tab button if you want to.
Now inside our images folder,
I've got an image called angela.jpeg
Now yours might be called something else, and then we're going to run packages.get to add those images
to our project.
So now, we're ready to change our circle avatar. Instead of having a background color,
we're going to have a background image instead. And our image is going to be an asset image, and the name
of the image is of course images/angela.jpeg Let's hit save, and we should see our image show
up in our little circle avatar here.
Brilliant.
Did you manage to get that right?
If you have any trouble with the asset image and also understanding how the pubspec.yaml works,
be sure to review the lesson we talked all about how to import images into our project assets, where
we go into that in more detail. Now that we've set up our circle avatar,
the next step is to add our name to our business card.
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.
At this stage, you can see that the text shows up in the default layout.
So it's just a piece of black text in the default font.
It'll just be a piece of small text that's in black, that shows up in our column underneath the previous
child.
Now, what if we wanted to style it up a little bit?
What if we wanted to customize the styling of our text?
Well, we can take a look at the piece of text, hit COMMAND + J or CONTROL + Q and see what other things that
we can change about it.
Well, we can change the data that goes in.
So, in our case, it's Angela Yu. We can change the style of it.
That seems like what we want right.
So we have to set a property called style, and it's going to be of type text style.
So let's try that.
Let's add the style property, and let's change it to a text style.
Now what kind of things can we do with text though?
Well Android Studio is very helpful in pointing out we can set the color, the font size, the font weight,
font style, letter spacing, all of these things.
And let's start by changing the font size.
And I'm gonna change it to a 40 point font, and I'm going to hit save
so we can see what it looks like.
Yeah, that looks pretty good,
size wise. And then I'm gonna change the color. I want it to be a white color.
So let's write colors.white to get our material palette, and change it to white.
Yes looking instantly better.
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
to write fontweight.bold. And now let's hit save, and you can see that we now have a bolded piece
of text that's going to represent our name.
Now the only difference, between how it looks in our project, and how we want it to ultimately look is,
that this is a different font.
So how can we incorporate our custom fonts into our projects, rather than just using the system default
fonts..
Well to find out about that, you'll have to head over to the next lesson.