Hello, in this video I am going to show you an expansion panel list and expansion panels inside an expansion panel listen basically a list of expansion panel. And expansion panel is from the bottom information, you can click and expand and it provides more information. So it's a great way of lifting up a list of item. But you know, maybe, if contact, for example, you have the name and phone number, and then if you click the expansion button, it could expand a bit equal provide you with a few and other items, such as a button for calling but for editing, now bit of extra information without actually opening up a dialog without going to another screen without opening anything else or expanding it. This isn't normal way of displaying information. So this is one of the more complex widgets, because you need to have a new class or an extra class.

And I'm just gonna call this my item and in here, we're gonna Have a constructor. And we're gonna set something by default. But before we do that, I need to create some variables we go expand. So this will work where we substandard or not, we need a final ring for the header, we can have more complex items and this simple. And if you understand what we do in this video, you should be able to go and in here and say this.is expanded along both. So by default, it's false.

Unless we specifically set it, we're going to see the header. This is going to be proof of this is being expected. And that's it for this now, in our own school, my homepage date. What we are going to do is create a list of those items. I'm going to call this underscore items can be equal to my I turn and now we can just sunstroke. This is pretty simple to co lawn to get rid of the error.

Now, in my item, open brackets, I'm going to say data. Data like and now we're gonna say body. And I put the body on say body. three instances of it, you can, again make the class more complex forms, keep it simple to upgrade, body to three. Now we can construct our application to be displayed. So we don't want a scaffold.

What we want is if we get rid of this, we get rid of it. We want to a view Yeah, you missed visas checking the deleted wanted to. And for me Hold on here you can add a few different properties. But we're just going to be dealing with the tool to basically put the ListView inside of something and I'm going to keep it simple and This replaces scaffold with it. And this ListView has children inside of it. And this is basically you know where we're going to be pulling our expansion so say banshan list and the expansion list is going to have an expansion callback.

A couple of variables, record from the back end index, and another Boolean for the plan this basically not and we're going to be using all locked in here. We're going to set state, I'm going to say underscore items, we're going to get that particular index. And this set is expanded to not true or false but to what it is currently but the opposite of it. So we're going to notice like it's already open and we click it is going to go to the opposite was a false and vice versa. So items in necklace can get expanded again, but because we've done the NOT operator, it will be the inverse. Now what we need to do is essentially add the children whose toy term dog dot map and is my item item, curly braces and need to do.to list and besides the element of return and you know, regularly Expansion panel.

Ban new isn't required on the latest version not to adopt new llaman transmission power open brackets, and we need a semi colon. Inside of here, we're going to say header builder, we're going to be constructing the header. We're going to keep this simple. Build a context, context, boom, expanded, again, expanded on that turn text. We're going to just say item dot headers, this will basically go over a loop over all the items in here, so we don't have to manually add them one by one, we just put them here. And again, it can be more complex than this.

It could have more variable most essentially but should be all good to go once you got everything from this video. So what we need, we got the The builder. Yeah. Now what we need to do is expanded it basically set to the expanded of the item. And finally, at the bottom of the body, it's gonna be a container. And inside of your child, again, you know, is the body know, you can add a child and any sort of child you want, you can customize it.

And obviously, you can do alignment, color, height, all of that stuff. And it's totally up to you. But I'm gonna keep it in a text item. You could be more complex than this. And I'm gonna say item dot body. Hot reload that.

Let's see, well, yeah, it's hot reload is added the free item. So if I open it, Scott body 32 and, again, you can customize the look and feel of it the color, I recommend that you do that you can combine your rows, columns, all of that good stuff. You could put this inside of something else totally up to you. If you have any questions, feel free to drop me a message. And as usual, I look forward to seeing you in the next video.