Hello, in this video we are going to look at the drawer navigation component. So the drawer navigation component is basically that little burger button that usually appears here on application, you can click on it. And basically load drawer opens up with extra selection items that are displayed everything on the screen at once. It sort of hides the items, but you can easily access them. So it's really good for navigation and creating a smooth slick user interface to do this really simple draw, draw up the drawer class. And inside of here is where we you know, everything has a few different things you can deal with elevation child key and semantic label.

The other thing we're interested in at the moment the child bond provide the official documentation link so you can check out every little aspect of it. And for the child, kids add one child that's been hired for the war recommend Is that you add a column, and inside the column, you obviously have children. And here you put all of the items that you can have any sort of item that images text, but to get the best format, what you want to do is put a list title and the lift title, we completely did. And we can put an icon for this. So he has an icon to represent what is happening or what is being displayed after the icon was gonna say icons dot and then complete, let's say along and we can have full stops that are comma, comma. We can have some more information with quite a few stuff here that we can do.

We can also have a look at gestures like on top and on long press. We're going to implement on tap very short soon shortly. We're just gonna put title, text. And we're gonna save this see what we get. When we go to advocacy it is right there at the moment, it doesn't do anything when we click it, let's do the on tap function. So who's just on sorry, is meant to go inside of the list toggle, you can have as many lists as you want on tap for the on top.

We can even call a method that we, you know, might create separately here. Or we can do an inline method. I'll just do quickly an inline method. But again, it's totally up to you. Here. You would not do any of your code in terms of changing the app state.

So for example, to taking you to different pay different way you would do it at the vessel. The completion date afterwards, you would do navigator is optional, but it's good practice to do this navigator dot pop. And this will basically close the draw navigation component after you've selected because you don't want to have to manually close yourself extra tasks that users don't want to do. The first time you come along, we go back to it, when we click it, as you can see, is nice clickable, obviously we can do this, but this will close it and if nothing here, we said change age for example. I go on to and I just go off like that. Nothing is printed.

I'll go into it. Go off to like that nothing is printed before going to it. Click it to close it, but it also sees change. So that code is only triggered when you successfully click that particular item. One problem you might be seen is that it's a little too high up. That's what we used to do as an exit task is big right?

How to actually reposition now the items. So it's, you know more in line with the way most of the application standards are. And it's just easy to see because this is actually cut off slightly by this top bar here. So how about that? If you have any questions, though, feel free to pop me a message until usual, I look forward to seeing you in the next video.