Hello, in this video, I am going to show you how to implement a bottom sheet. So the bottom sheet basically allows you to open up like a little menu that just scrolls up from the bottom, it's a really cool thing to do. So you might get seen applications when you click a button, maybe you have like a blue bar at the bottom, it has an arrow, you click it, and you just saw, you know, scrolls up. And you could have different options. That option potentially could be made for sharing for deleting something for editing, not that sort of stuff. Obviously, the functionality the option that you want to provide a totally up to you.

I'm going to show you how to implement a bottom sheet and you can customize it however you wish. And to implement the bottom sheet. Really simple to be fair. So what we need to do is in our classes start a local void. And this is basically going to be the method that initiates the bottom sheet. Don't open bottom sheet is in a context which we'll be using Very soon.

And now we do show modal bottom sheet. And I would like I didn't manually myself. So I, you know, keep track of what I've been doing. And the context is going to be what's being passed through. We're going to have build up if we were we're going to be constructing what our, you know, bottom sheet will look like. And this will be content on at first.

And now what we are going to do put the code in braces and in here we need to exclude a container. And inside of here, we need a new child. This is going to be wrap. And in here, you would have tools so this is the general no format for in in here. You connected Weber children, you want to put tactical images, but I recommend trying to do that as well. But you'll see that without extra formatting, it just doesn't look very good.

What you want is in this, Oh, this looks fine stick inside of a bottom sheet. And the list tile will go into how a kneading is basically going to be an icon at start. And again, you can customize the arrangement of what you put in here with the icons da, see a lot. Again, we're not doing functionalities, just the you know, the visual front end side, and the title for this loan, and then comma, and then he bought on top. So once we click it, we can, you know, do some functionality. I'm just going to do a print up the simpleness A For example, and that's it.

And if you want to add more options, you literally just need to duplicate that and modify this this. And what's in the on top of this is to have some coal on this one. And instead of a long icon, a map icon. Yeah, go on with a map. Yeah. Let's save that.

Let's see what we got nothing yet because we haven't actually triggered it. So what we're going to do is go down here is create this is going to be icon button. So this needs a icon, icons, dots and I'm going to say is that something for open Yeah, let's do this again, this way looks like and it's an event for encore. So when it's been pressed, we're going to trigger that, but we can trigger it by saying open bottom sheet, you need the context. And this is created right here. But we'll save that.

We'll see that with the hot reload button appears. I click it. As you can see, it appears from the bottom now looks pretty cool. I'll click alarm, we get open alarm, we get perfect that you might be thinking, how do we close this and go back to the main part of our application, click off it. If you don't want that, you want to be able to essentially click one of the items and for the actual bottom sheet to close, it's pretty simple. To be fair, all you need to do is in the on top, preferably after the rest of the code has been run.

You just put navigator dot off context which has been passed in then do.com So if I was to do that, so I go back, if I click along, adding the triggers the open alarm print, and then it closes it. So let me demonstrate one more time, click and it closes it for the map. It doesn't close it because I haven't implemented this yet. So that's how you make a closing once you select the item you may want that you may know. So that's really, 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.