Laying Out the Order Page

[00:00:00]
>> Now, if I go to the order page, okay, at least for seeing quickly if this is working. I can put the text and try to say, Cart length dataManager, we have all ready received the dataManager with either before dataManager.cart.count. If you look at here, we should be able to see something.

[00:00:28]
So if I'm going to the orders section now, it says zero. It's actually really small, okay? It says zero. If I add something, I go to order, it still says zero. Why?
>> The data binding is not there.
>> The data binding. Maybe has to do with data binding?

[00:00:56]
Well, we'll see let's start designing the carts so we can actually solve the problem in a minute. First, to design the cart, the cart will have rows, okay? With the details that we have in the cart. This is actually doing the same thing as we did before we create a row and we add some text.

[00:01:16]
So something that we can do is in the companion website we are actually In the last part. We have the creating the cart page and they have an order item all ready for you. It's just playing with the same thing it's not actually a big deal, let me paste that and actually see that and see what's going on.

[00:01:40]
So we have the ordered item will actually render an item, okay? And it has an own remove because he will have the delete button, okay? And then it's a card, so it's a busy wall card. The card has a row, and the row has some charts with an expanded version.

[00:02:02]
We haven't seen the expanded version before. So the expanded version will show will try to use Flexbox ideas. So in the row, they will be expanded based on the flex property. So in this case it's one, six, two and one, totals ten, so actually the first child is a padding with the text will be 10% of the width.

[00:02:30]
So this is like CSS saying with 10%. Does it make sense? This one says with 60%, and so on, all right? You'll get the idea 20% 10%. Why? Because it's using that flex, actually if you want, you can use present dashes like this. If it's clearer for you, it's actually just the same.

[00:02:55]
So when you want this to render this order items here In the cart.
>> If you pass in an item count we would always render that number if.
>> Okay.
>> Some are off the screen.
>> But we can answer the question. I can answer it now because now I need to add another of those.

[00:03:14]
So what do I need to do here? I need to add a Listview.builder, okay? And remember, the builder receives an item builder that has the context and the index. And also we typically need to pass the item count. So what happens if we say 100? It will actually execute item builder up to 100 times, not necessarily 100 times because if the user is not scrolling, it's not going to ask you for all the items, all the items are all ready on the screen, okay?

[00:03:50]
But, of course, if you're sitting there more elements are the ones that you have, you may have a problem. Okay. Make sense? So typically here you need to say now you know what. We want to pass the length of the cart, so then we are not passing over this and then we will have the current item.

[00:04:15]
So index and what we need to do is to render we're going to return the item builder always return the widget. So we're gonna return an order item with that item and for our remove, we need to pass a function. Okay, something like that. So any question on the idea of what I'm doing?

[00:04:42]
Does it make sense? I mean, we have an order item that is like a program item and is just entering one row. It receives the data model for entering in the row and it will lift an event for own remove. And by the way own remove here should talk to data manager and ask to remove something from the cart, that product that we receive as an argument.

[00:05:13]
But will it work? We'll see.