 Hey everybody, it's Brian. Welcome to the 27th Flitter Tutorial. Today we'll be going over the alert dialog. This is part of the material design widgets and like the snack bar that we covered in the previous tutorial, I'm covering it now so that if I use it in future tutorials, you understand what's going on. So there's really no black magic or voodoo magic or whatever going on here. Should be noted there are other types of alerts such as the bottom sheet and the simple dialog and the expansion panel that we are going to cover until future tutorials. I just wanted to focus on these two for now. So let's go ahead and jump into a blank project here. Got to import material design. We're going to extend the stateful widget. And I'm still like I've said in the past few tutorials got a cold so I've been recording these over a few days but man this cold just will not die. We're going to create the state of this. Oops not new. And we're going to shove my app out is the home of the material app and then in here. So I'm trying to get healthy as fast as possible because I want to go out and see the new Star Wars before it leaves the theaters. It's been out for a little while now. All right so in here it's going to be the same design as we had in the last tutorial where we're going to have the text or we're going to have an app bar we're going to have a text box and then we're going to have a button here so let's go ahead and kill that existing demo. And let's go ahead and type all this out plus sign boy that's an interesting operator. There we go build context. All right so we're just going to build that bad boy out here and we need to actually build our user interface. So first thing we're going to do here is we're going to say we're going to return to scaffold we're going to say alert dialog demo and then the body don't know why I did that. There we go new container just in case somebody downloads this code and they want to add some padding I'm not going to really worry about padding myself but center everything up then we've got our widget array here we're going to say new text field the new erased button and let's go ahead save this missing concrete implement missing concrete implementation of state for which it creates state I'll create start all right let's go ahead and build this run it out make sure this thing actually runs on the device create those resolving dependencies and we're going to push it out here and just give it a minute it should appear on the device. There we go so we've got our text field that we can type into we've got a button that we need to put some text here and when we click this a little alert dialog will pop up here and we can play with that all right so let's branch this out here we're going to set the state here so we need to hold that variable in memory I should say we need to change that variable it's in memory as part of the state and we're going to use this on change right here pump that variable over to our on change function all right so let's actually all right so what we've got so far is basically when the text field is changing we're going to take the value and pump that through the set state into our text variable here now we want to actually show the alert when they click the button and we're going to use the text variable for that now in here what we need to do is we need to create an alert dialog but we don't want to show one if it's empty so we're going to say if value dot is empty then we're just going to return out alert dialog dialog equal new alert dialog and you'll get so used to doing that throughout your little career here as a programmer all right so the content of the alert dialog we want to say new text and in here we want to say the value and then we want to set a style here so let's say style new text style and we want the font size to be 30.0 that has to be a double it cannot be an integer so if you do that it's going to freak out on you all right so we've got that in there now we need to say actions and there is our widget array here what we're going to do for this and let's actually just run this just so you can see what it looks like here did it not run oh probably help if we actually did we do that what's going on here oh I know what we did wrong we forgot to actually show the dialog derp not show about dialog so we want show dialog and the context will be the application context and then we want the child to actually be the dialog save that pump this bad boy back out to our device here and we'll say test and there is our alert dialog and all its glory now if you're looking at these actions widget array over here what we're going to do is we're going to add a list of options here and then when we click that we want to know which option was clicked so let's just get back out of that and sorry about that somebody was texting me and it kind of threw me off a little bit here we need to make it a num here so we'll say and um my dialog options do we call these options or actions let's call them actions my dialog action why not we'll say yes no maybe all right now in here in our actions for the alert dialog we have a list of widgets that we want to pump in here so we're going to just make one widget we'll make a flat button notice how it says on pressing child for us it's very convenient and then it'll say let's say all right now the on press we need to actually wire this into a function here so let's say whoops we're going to take that a num and we're going to put it in here and for this we're just going to print this out we're going to say print the actual value here and then dialog result all right so let's run this back out to the device and then we have a yes and if we click it nothing happens now actually under the hood if i could find my where is it too many options took me a second to find it but it's right here in our little android monitor right there boom so we selected yes let's go ahead and click that a few more times and you can see that it's actually happening in the background here so that was bloody confusing i don't know what i got all hung up on there so we're going to go back in here and we are going to make a couple of these and to close that dialog out we have to go navigator dot pop and we want to pop to the current context that way it's not going to leave the current screen that we're on let's run this again and we'll say do you like flutter we have yes no maybe so let's look in our little android monitor here pop this back where's my emulator there you are and if we say yes you can see that it closes the dialog and we get this you selected the my dialog dot action yes and from there you could do a switch statement to determine what actually you need to do next so pretty simple pretty easy pretty useful too i mean you can do a lot with this you can do yes no maybe you can put other controls in there but drop downs things of that nature pretty awesome for very entry level control well i feel i'm losing my voice this cold still kicking my butt so we're going to call this tutorial done for the source code for this and all other tutorials visit the tutorials tab on void realms dot com go out to get up and if you're so inclined go out to the void realms facebook group where there is 1700 other programmers out there all right thanks for watching