ProductItem Widget Layout

[00:00:00]
>> Actually, we are going to download this from the network. But before doing that, maybe it's time to start doing something in the menu page, so we can actually see something. So I'm going to, again, really yelled my Windows, so we can see the preview there, like so.

[00:00:22]
And what I have here is the menu page, okay? So, the menu page will render items, like product items, okay? So, what I maybe want to design here quickly is another widget that will render one product in particular, okay? So it's not gonna be a big deal, he has an image and a couple of text, so it's not really a big deal.

[00:00:49]
But let's make it, so we can do it quickly, it's not going to be so problematic. So, another statement we should try to do it here in the page or in a different file, at this point, you make that decision. If you feel like it's part of the menu page, you're not going to use it anywhere else, it's short enough, maybe you can use it here.

[00:01:15]
If you feel like it's reusable and you may wanna use it later, or is this too big, it has its own unique problems, well, you separate that in your new file. So it's actually up to you, it's another stateless widget as the last enter, let's call it product item.

[00:01:36]
The idea is that this product item will actually render one item, one product on the screen, okay? So, because it's going to render one item, I need the product, right? Because if not, I don't know what to render. So, I'm willing to receive the product somehow. Some nature receive it as a require constructor Element as we did before.

[00:02:06]
So we have the product, we probably need to import the data model to make it work Like so. And it's complaining that hey, that property must be final, because if not, it's not gonna work. So widgets, input properties for the widget must be declared as final, okay? Make sense.

[00:02:33]
Well, now, for here, I may wanna use a container, by the way remember the padding widget? Actually the container has also a padding. So, sometimes in flutter, we have several ways to do exactly the same thing. So, we can use a padding widget or a container with a body declaration, is the same.

[00:02:57]
So in this case, I can say that I want a padding of eight and the container has a child, not children, child, only one, only one widget, the container contains only one. So, I may wanna use, remember the card we use before. Card is typically being used a lot for elements that are individual elements, it carries visual components created by material theme that has an elevation.

[00:03:26]
So if I have a card I have an elevation that makes that little shadow over the element looks fine. And then we will put something as a child. For example, let's start with a text, I wanna see the product name, something like that, training coma. Of course, I'm not seeing this, why?

[00:03:47]
Because my menu page is rendering nothing, but now instead of container, what I can do is to render a product item. That one of them, the which of them, I'm creating at the bottom, okay? So I can actually see that on the screen. So the programming receives and mandatory product.

[00:04:07]
So I actually need to pass a product as an argument, like a dummy product, it makes sense? So also I can make the product first, par p equals to a product with id 1, name, dummy product, price 1, 25, image, I don't care so, something like that. So I will pass that product as an argument, p, sorry.

[00:04:38]
So now I'm seeing that dummy product on my menu page, okay? Yeah, it's a sealed pretty this point. So what I want, is I want to see an image and you must first, and then the product name, and the price, okay, makes sense? So because I have something, something, and something, what is that?

[00:05:00]
A column, okay. So I will wrap this text into a column, wrap with column. So I have the product name, I will add the product price, and they said that they want an image. For that, I have a dummy image in the images folder, it's called black coffee, because we didn't download things from the network yet.

[00:05:24]
We don't have the real URL of the image, so it's just that one. So it's image from the assets, images/black_coffee.png, okay? Coma, coma, coma, coma, here is complaining, why is complaining? The price is not the string, okay? So it's a double, and text is expecting a string. So a simple way to go over that is to open, in fact, maybe I wanna add the $ sign.

[00:05:56]
The dollar sign is for templates, so actually needs to be escaped. So this will look like this, look at that. I have double dollar sign, hey like that but the first one is escape, so it's actually the dollar sign character that they want in the output and the other one is just the expression.

[00:06:18]
Now that we render the price, so if I save this, okay, it's not loading the images because I have a typo, coffee, okay? And this is how it looks like now, it's getting better, okay? So first, you can see that by default its center, okay, interesting, right? So by default is send the text center, how can I change that?

[00:06:44]
Columns or rows, they have some other arguments that they can set, that can let you change the alignment. And we have two ways to define alignment, the main axis and the cross axis alignment. So if I'm in a column, the main axis alignment is vertical, and the cross axis is horizontal.

[00:07:05]
If I'm in a row, it's exactly the opposite, makes sense? So, in this case, we try and shoot a change, the main or the cross. I'm in a column, I don't want the text to be centered, that's the goal. I see you're doing this.
>> Cross.
>> Cross, so the options available here are actually part of a class or constants of cross axis alignment.

[00:07:35]
So we have a start, okay? And it did the trick. Remember, so if you're in a row, cross is going to be the opposite direction, so we have main axis and cross axis. Every time you are doing layout that's how it works, okay? Well, then I need some paddings, you know how to add padding, so I can click on the text and rob with padding.

[00:07:58]
The same on the other one, wrap with padding, save, all right? It's looking like that, not so bad, let's say one the text will be bold. Every property that has to do with font, it's actually under the style declaration. It's a text you create a new textile with a lot of properties and we have the font-weight, okay?

[00:08:22]
And the font-weight has a set of options, such as bold.