Hello, in this video I am going to show you how to implement a snack bar. So a snack bar is something that is triggered and it pops up from the bottom, you will provide some information. So for example, if you delete something might pop up saying delete successful and it will provide you the option to do it, they disappeared. So there's a bit of information that quickly problems when and then it populates. Okay, so to do it pretty simple to me. First of all, I'm going to create a res photo.

And the only reason I'm doing this is so use this to essentially trigger the snack bar once clicked, but you could trigger it however you want. So in here on Monday going to do the on press, I'm not really going to stylee or anything or do anything fancy like that. I'm going to add a child and that is going to be text. That's going to say me and for the snap bye All you have to do first of all we need to add the function. And what's gonna be final. We're gonna say s and K bar equals that bar.

And here I'm gonna say content for the content was gonna put some text. We are gonna say not all the time. assay Oh yeah. Okay, so we got this button for clicker nothing Ah, that's the mistake right there made it by need to actually trigger to trigger it. You do SNK bar.com. widen the contact.

Which is basically this right here and may mistake what I'm doing in here you go to scaffold.org then providing the context dot show snack bar, then you provide in the snack bar that you created. If you know you're going to be using this multiple times, you could essentially do this code and and whenever we add afterwards which we're going to add in a second, you know outside here you know where you've created variables. So you can use it multiple times that it creates it together. Yeah. Okay, so besides unnecessary hot reload, for ticket is all scaffolder. Of course your contest that does not contain a scaffold.

Now we've got a scaffold Let's have a look at what's happened there is the usual way to trigger it. That's what we want to do trickly with this scaffold, not. So let me try something. So let me try this. back. You know what I'm going to do for the scaffold that did not want to do that.

We can add a key and that basically allows us to, you know, refer to it the first day on the school, that fold What is working? So we've added a key. And the key should allow us to refer to it and was this on define name on the school scaffold just created there. Oh boy. The sorry, where am I headed out? We got to create your final global key.

And then we go do the the actual what we do in that flow state equals global key and that bold step Yeah, so that should solve that error here in dead to do underscore stuff oh.org wide that no number one would be totally different. Sorry about this we should be current date dot show snack bar and K bar, put a semicolon there, save it, and it will show the snack bar. For click it we show the snack bar fantastic. So it disappears. As you can see, it is built we can drag it off otherwise we don't like it. But what I want to do is show you how to detect a click on it.

And to do that, we'll simply come in here a few different properties we can I change the animation in a separate video covering animation the Combine that with this and the duration. So that's how long it's gonna stay on there won't do action, you do snack bar action. And we'll sort all this out. And then here, we need to put a label. And this is just gonna say what it's gonna do. I'm gonna say, order.

I'm ordering the pizza, for example. And in here, we'll say on pressed, so what code is going to click away anything press on is going to do a print event. Simple as a pizza is on it. Save that now, go there, and see to the bottom there, but nothing being printed out. Because we haven't clicked here. If I click it again, and I click order.

Now I need to make it disappear. It triggers this piece of code right here. This could trigger another event. This could be more complex than this is Tokyo to users. Make sure that you create a globally for the scaffold and the industry. assignment like so.

And then that way you can do scaffold current state DOT show. That's really it for snack bottle. Nothing more to it than that. If you have any questions, feel free to pop me a message. And as usual, I look forward to seeing you in the next video.