Flutter 26 - Showing a SnackBar Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Bryant welcome to the
26 clutter tutorial I still have a bit
of a cold so forgive me if I voice
cracks a little bit today we're going to
be covering the snack bar snack bar is
interesting because it allows a
lightweight message to be displayed on
the screen briefly for the user it just
lets them know that something's going on
I wanted to cover this and maybe the
alert dialog before we really start
diving into other tutorials that way
when we use them you're not mystified as
to what's actually going on so I've got
a blank project here and we're just
going to start typing away we're going
to import the material design make our
main function
we want the stateful widget then we want
to create a state for our stateful
widget I always ask why do people like
watching me type it's so much easier
just to say hey here's a finished
project and look at what we've done but
people like watching me make mistakes I
guess it makes them feel a little bit
better because everybody makes mistakes
and a couple people said they like
listening to my thought process and how
I get from point A to point B and I get
that because sometimes I walk into a
Applications code and I'm like what in
the hell is this alright so we're gonna
make our new material amp and we're
gonna say home you guessed it my app why
is that complaining oh yeah
cold medicine there we go you will see
many many typos while I'm on cold
medicine
point in case can't even type create
state here alright so we're just simply
fleshing out a state of our application
here we need a state because well we're
pretty much going to have to need one
for almost every application we do every
time you interact with the screen and
you're going to save some sort of data
you got to save that in the state so
first thing we're going to do is create
our variable here then we are going to
you guessed it to our override and this
is kind of just boilerplate at this
point we've done this a couple times
actually 25 other times let's go ahead
and build context context
there we go so we've got the bare bones
of our application here and we're going
to flesh this out now really what we're
gonna have here once we get this going
is we're gonna have an app bar followed
by a text box followed by a button and
when we click the button the snack bar
will appear down at the bottom so let's
go ahead and actually build out this
application bar there we go I hate
having a cold it's like I'm like here
but I'm not here and I think I'm doing
the right thing and then I'm not like
the other day I went to make toast and I
put the bread the refrigerator and stood
there for like five minutes waiting for
it to get toasted and then it occurred
to me it was just getting cold so yeah
all right so we added it we're adding a
container so if we wanted to put some
padding in there we could I don't think
I'm gonna really play around with
padding but just in case somebody
downloads this code and there's our new
center and inside the center we're going
to say child new column children there's
our widgets and we'll say new text field
new raised button let's go ahead and run
this and see what we got
just make sure it looks the way we
expect it to and I'm actually pretty
amazed a lot of times I'll build the
application to run it just to
quote-unquote make sure it runs part of
that is because flutters an alpha but
you know I've never had hmm
I was just gonna say I've never had one
crash on me but I guess I just did what
is the problem here open again hmm
I didn't work lost connection to device
let's figure out what's going on here
installing syncing files host new host
connection fatal signal 11
hmmm let's look at her code and see
what's going on here well let's try
debugging this and see what happens I've
actually never had one of these crash on
me before this is interesting hmm
of course now it runs interesting wonder
why that crashed it is working alright
well let's just kill it and rerun it
raze button we're gonna add in a couple
properties here I was gonna say um now
I'm a little embarrassed I was going to
say that I'm actually really impressed
with the wave flutter has been so far
even an alpha I'd never had anything
crashed but I guess it was a first time
for everything kind of kind of happy
that happened while it was on camera
here because it's just kind of
interesting to see makes me wonder what
happened there though I'm not sure if
that was a problem with flutter or
problem with my emulator here a lot of
times people are very quick to kind of
you know blame flutter for its
shortcomings when it's an alpha and the
reality is it's really not flutters
problem alright so let's get rid of that
want to run this one more time just to
make sure apologise for the delay but
that made me a little nervous that it
did crash hmm it's working alright well
we'll just continue on then if you're
new to mobile programming don't get
discouraged by that I've worked with
react native before and it is a little
glitchy at times I'll write code and I
swear that it'll work I'd bet my life on
it and of course it doesn't work it
crashes and then I have to figure out
some weird error message it's just kind
of the state of mobile programming at
this point so the first thing we want to
do is actually track that variable so
yeah
I'm going to do that through the set
state there we go so we're just going to
take this on change and we're going to
monitor the unchanged in the text field
oops put this in here there we go
so when on change is triggered in the
text field we're going to pump out that
variable to our unchanged value you
could very easily take the set state and
put this right here but I wanted it to
be very obvious what's going on then I
wanted to kind of break that out without
making it look really ugly down here all
right so we're gonna show the snack bar
in this one to do that we have to add a
little bit of magic here and it's gonna
take a little bit of discussion and
admittedly I'm not an expert in this
either so it's kind of the blind leading
the blind here we need to make what's
called a global key and you see how it's
a generic type so it's global key
extends this state of a stateful widget
so we're gonna say global key of the
scaffold State and we're gonna call this
scaffold state all right so first off
what is a global key what is even a key
well a key is a way of identifying
something a global key is a unique key
across the entire application that being
said there can only be one of these
scaffold states across the entire app so
let's actually add this in here and
we're going to use that and then in our
show snack bar we're going to say
actually let me modify this just a
little bit here we don't want to show a
blank snack bar here so if it's empty
then we're just going to get out of
there all right so we're gonna say
scaffold state current state and then
we're going to show the stack bar first
thing it wants of course is a snack bar
so we're gonna say new snack bar and
then we've got some content in there and
I'm gonna break this down a little bit
so it's a little easier to read
and in here we're just going to say a
new text and we're going to say the
value that we're trying to display let's
actually put this on the same line there
there we go and then on here we'll we
press the button we're going to say show
snack bar and we're going to use that
text variable that where you're holding
in-state all right let's run this out
and there is our snack bar at the bottom
if our keyboard was hidden it would be
down here at the bottom so that's really
a snack bar it's just a little instant
notification on screen display and let
the user know something happens so you
could say something like if you're in a
settings dialog and they click the Save
button you could just say like settings
save that way they know something
happened it's unique to the application
because we're using global key so I
believe I haven't tested this but I
believe that if we were to use the
Navigator and switch from one screen to
another that state would store that
snack bar would still show up it
wouldn't automatically disappear but I
haven't fully tested that yes I don't
quote me so that's it for this tutorial
thank you for watching I hope you found
this educational and entertaining the
source for this and all other tutorials
will be out on my website void roams
comm you just go out here and click on
this big get link it takes you right out
the tutorials and if you're so inclined
join the void rums Facebook group
there's seventeen hundred other
programmers out there that we can
definitely help you out with your coding
problems