Nesting ListView Widgets

[00:00:00]
>> Now, what do I need to add apart from the categories? The product, right? So, the category has products. Remember? So, how you do that? What do we need to add here?
>> Another ListView. Another lease view, but where should I add another ListView in the other lease view.

[00:00:24]
Can I have to leave your one inside the other? We can with one special warning because they was intimidated. Because they will be fighting for the scroll when you have two ListView at the same time, and that will give you an error. But we can talk to the nested ListView and say, hey, you're not going to be responsible for the scroll.

[00:00:45]
So, like remove the scroll, and it will work. Okay, it makes sense? We will see how to do that in a minute. But before doing that, we have a padding here for each category and we will need a column or something to actually put first the name of the category and then the ListView.

[00:01:04]
Makes sense? We always need containers. So, we go to the padding, right click, and here we are going to say the refactor, wrap in. For some reason, it's not showing me, Column I'm going to add it manually. So in the column Column has children not child. So, I need to put this in an array, that's why it's better to you use the tool, and we have a padding and also another ListView.

[00:01:40]
And this ListView will also contain a builder because it's a dynamic data, not a static data. That's the idea, okay? We use a builder every time we have dynamic data. The builder needs the count. So let's start with the count. Whereas you I get the count of product categories.index.products.length.

[00:02:05]
Makes sense? I'm looping through the structure here. And the builder is always the same. It receives a context, And the index of the current product that I need to render. And what do you think we should have render here? A text? We have our own product either remember that we did before.

[00:02:34]
That receives a product. Do I have a product? Yeah, it's categories[index].products sub, we have a problem here, this is the product index. We just changed the name, okay? Makes sense? Of course, we can create intermediate variables here as well. And we also need to define what you do on OnAdd.

[00:03:04]
For now, let's put an empty block. Okay, we need a comma here and parenthesis. This is closing that one. This is closing the builder. Okay? We need semicolon for product item. You can see it's really complicated sometimes to find the right, Look at this. So, we have things like the we need to return a product item, so this is going to finish that builder.

[00:03:50]
Like that. Finally I got it. So, now I'm seeing nothing on the screen, which is kind of boom, okay? Nothing is on the screen. What's going on? Well, typically when nothing is on the screen and it doesn't well, we have the navbar but nothing on the mirror, I thought something before, when something doesn't seem right, you should check into the console in the browser for example.

[00:04:16]
Typically you will see some exceptions where to find those exceptions here in builder column as well. You need to open the debug output window that you can open that from there. And you will find the possible problems that you have errors, okay? In this case, I think the error has to do with the ListView that I already mentioned before.

[00:04:39]
You cannot nest two ListView because they are fighting for the scroll. So to follow berm there are a couple of properties two properties that you need to put here it's shrinkwrap you say true, another property is physics and you say clamping Scroll physics. And automatically that solved the problem.

[00:05:03]
The problem is that you cannot have two nested ListView, because they're fighting for the scroll. Unless one of the ListViews say I'm resigning, okay, I'm not going to scroll, so no worries. So, if we look at that the final result that we have here, we see a snacks so it seems like it's working.

[00:05:22]
Yeah, the image is the same image, but why? Because our product item is actually our code in the image, remember? Well, instead of using the asset constructor, there is another constructor that says network. As simple as that. And I can take my product ImageUrl. And now it's giving me some errors.

[00:05:48]
Let's see if I tried to see here failed to load exception. So, we may have a problem in the URL. And also, I need to tell you something. If you want these to work on Android, we need to add permission. By default, an Android application has no permission to access the web, okay?

[00:06:11]
So, we need to ask permission. In the documentation, you have the information on how to add permission in in the companion website for an Android app. Okay, so let's go to our data model. And let's try to see if these images are actually there. So, for example, the black Americana.

[00:06:37]
It's a 404 so, seems like I had a typo. Look at that, coffeemasters, okay? So, we had a typo in the data model. I'm saving and magically my inner sheets are working. Okay? So, now we are rendering this section. The only missing part here is when I'm clicking Add.

[00:07:10]
When I'm clicking Add, remember the product item was lifting that Inchon event to its parent. Who is the product item parent? The product page. This one. And here we have the OnAdd. What do we need to do with-
>> Data manager and-
>> dataManager.cart or directly we have a cartAdd.

[00:07:34]
We pass the product. We have the product where? Well, we didn't create the variable probably a good idea to create the variable. So, such as this, Var product is equals to this, so we can reuse the same variable. And if our logic was fine, it should work. Any question at this point?

[00:08:02]
This was probably the most complicated widget that we have created the future builder and all that stuff.