Creating the Card Layout

[00:00:00]
>> I'm going to wrap now my whole column in another widget call card. But when you look here, there is no wrap with card, but there is one that says, Wrap with widget.... That's the one I'm going to use, and I'm going to write card manually. Okay, so a card, if I save, it just a container that by default has no UI, but I can change some properties, such as elevation.

[00:00:29]
And I can say elevation: 7, for example. What's an elevation server? Well, let me see if you can see that here. There is a little, Some kind of shadow there, okay, that is actually defining this. And of course, I can change the background color. How can I change the background color?

[00:00:51]
Well, the card has a color property. So we actually you can see here. So for example, I can take for the colors, I can take any color, any swatch, any shade. I'm not saying this is going to look fine, but I can do something like this. Maybe the card need some padding, right, because I want the card to separate from the borders.

[00:01:15]
So then I click over the card, click here, Wrap with Padding > Save. And now, it's looking like this. What if you say, hey, but it's taking the whole height. What if I want it to be like a little piece of information there? Well, I can take the card and use another container.

[00:01:39]
So you can see everything is a widget here. Do you remember I mentioned that this can get really messy? This is pretty common in Flutter, widget with, widget with, widget with, widget with, widget with, widget. So there is another widget that has the name SizedBox. SizedBox can have a fixed height.

[00:02:04]
I don't know, 200 or maybe 150. You play with this until you're happy. Okay, make sense? So how do you debug this? Because I mean, maybe you're thinking, hey, but this is a web. This is the web, so I can just right click and inspect like on my website.

[00:02:28]
Actually, not really. By default, the renderer, that is, the engine that is actually rendering this, it's based on a 2D canvas drawing, not an HTML. So this is not actually a div. So here I have web components, but I can see the whole thing, but nothing else. So I don't have HTML elements to debug, okay?

[00:02:59]
But something that I can do, fortunately is there is an inspector from Flutter. So, from Flutter is exactly that icon, that one, Okay? That is also available in the View > Command Palette if you search devtools, Open DevTools. So the DevTools will let you open different inspectors, the widget inspector, CPU inspector, network inspector.

[00:03:30]
And also, you can use this in a web browser. So you can open a web browser version of the inspector or you can open thee inspector here directly in Visual Studio Code or Android Studio, if you're picking Android Studio. So, here you have, is difficult to use this with a really big font size, but you have the widget tree.

[00:03:52]
You can click on each element in the widget tree and see information about the current width, height, and size of the widget. So if you wanna debug your widget, this is how you're going to do that.
>> Can you do changes the other way, just to play with it?

[00:04:10]
You probably can, right?
>> What do you mean the other way?
>> I mean, just from the
>> IPhone to change properties here?
>> If you can just
>> It's not like the browser toolkit, okay? So there are some things that you can change, for example, on containers.

[00:04:23]
Let me see where I have a column here. So on the column, you can change, for example, this, we can play with this until, well, it's not going to make a difference at this point. So there are some things that you can change, my UI is not so complex yet to actually see some changes, but not a lot of property.

[00:04:40]
So, if I change the width, it's not working. It's mostly for the bargain, okay, for making a small adjustments, and that's all. Well, to finish this widget, I'm going to add another container. I can actually add it anywhere, it can be my card or it can be my column.

[00:05:03]
That is cool. Let's use BoxDeecoration. Box decoration, now, I'm getting an error. Let's see why. BoxDeecoration, Well, let's use the BoxDeecoration, let me go back a little bit. Command C. Let's apply the BoxDeecoration to a container first. So do I have a container? No, what's a container? Like a div.

[00:05:31]
So what I want this to use a background image. So remember that I do have a background image here, background.png. I wanna use that image as a background of my card, that's the idea. So for that, I need a container that is like a div. So I cannot apply the background image to any element.

[00:05:51]
So I need a container where? You pick where actually. It can be here, Wrap with a Container, and the container has a decoration. And the decoration is another object called DecoratedBox, another widget. Fact, it's BoxDeecoration. And BoxDeecoration accepts many things, such as an image. It also accepts shapes.

[00:06:17]
You can apply rounded corners. So there are many box-based things. And we know how to render an image, we did that before. We can do Image.asset and the name of the image. Or also, there is another widget. No, it's the same, it's called AssetImage. There is an image only for asset, if like the same, okay?

[00:06:39]
So there are so many widget. In fact, they're more than 400 widgets in Flutter. Okay, so you will never remember all of them. So AssetImage and the name of the image, that is images/background.png, okay? Trailing coma if you wanna get to a new line. And let's see, it's asking me for some const here.

[00:07:04]
We can add that later. Trailing comma here as well. So we can arrange this a little bit. DecorationImage, Think I'm missing here one, Element, the image needs a DecorationImage. And the DecorationImage finally needs the image. So that's what I'm missing. So now I will do this again. So you get the final idea.

[00:07:38]
And now, it's complaining because of const. By the way, when there are a couple of const, you can just say, I want to draw all the const to the file, all the missing const. Okay, remember that const is not actually mandatory, okay? So we are seeing the image, it doesn't look great yet, okay?

[00:07:57]
It is like, so what do we have? We have the container, the container has a decoration with the DecorationImage that has an image inside. And the container also has a child that goes on top of the decoration. Okay, makes sense? But this is still weird. We just need to change the property.

[00:08:18]
Think on where it's on the DecorationImage that is actually, let me see why it's not giving me image, fit. Its BoxFit.cover. And finally, we have something like that. So I'm changing a lot of properties here. What do I need to do here now? Why is it complaining? Const modifiers.

[00:08:52]
So at this point, probably it gets really messy. So, there is a moment when you're doing Flutter, where you feel like you're death, right? Everything is an error, and then a comma will make a magic trick. Of course, that happens everywhere, but with this syntax, it's actually pretty common.