Flutter 27 - Alert Dialog Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody it's Brian welcome to the 27th
litter tutorial today we'll be going
over the alert dialogue 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 in the simple dialog
and the expansion panel that we aren't
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 gonna 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
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 see 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 feeders it's been
out for a little while now alright 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 gonna
have an app bar we're gonna have a text
box and we're gonna 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 point that's an
interesting operator there we go
built context alright so we're just
going to build that bad boy out here and
we need to actually build or user
interface so first thing we're going to
do here is we're going to say and return
your scaffold we're gonna 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 they want to add some padding I'm
not gonna really worried about padding
myself but Center everything up
then we've got our widget array here
whereas a new text field then they
raised button and let's go ahead and
save this missing concrete implement
missing concrete implementation of
stapling to create stain Oh great start
dirt alright let's go ahead and build
this run it out make sure this thing
actually runs on the device creatives
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 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 gonna say if value
is empty then we're just going to return
out alert dialogue dialogue equal new
alert dialog and you'll get so used to
doing that throughout your little career
here as a programmer alright so the
content of the alert dialog we want to
say you know text and in here we want to
say the value and then we want to set a
style here so let's say style you know
text style and we want the font size to
be 30 point-0
that has to be a double of 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 gonna do for this and let's
actually just run this just so you can
see what it looks like here did not run
Oh probably help if we actually did we
do that hmm what's going on here oh I
know what we did wrong we forgot to
actually show the dialogue derp not show
about dialer so we want show dialogue
and the context will be the application
context and then we want the child to
actually be the dialogue 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 widgets
are way over here what we're going to do
is we're gonna 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 an enum here so
we'll say and uhm my dialog options
don't call these options or action let's
come 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 press and child
for us is very convenient
and then it'll say what's say dude 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 enum 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 dialogue
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 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 dialogue 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 at 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 dialogue
and we get this you selected the my
dialogue 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 dropdowns
things of that nature pretty awesome for
very entry level control well I feel I'm
losing my voice as cold still kicking my
butt so we're gonna call this tutorial
done for the source code for this and
all other tutorials visit the tutorials
tab on void realms comm go out to get
hub and if you're so inclined go out to
the void realms Facebook group where
there is seventeen hundred other
programmers out there all right thanks
for watching