Flutter 23 - AppBar and State Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody's Brian welcome to the 23rd
flutter tutorial today we're gonna be
talking about two things the app bar and
state state is kind of this weird
ambiguous term but we're gonna try and
break it down a little bit before we
really dive into that if you go to
flutter die oh and you click on sample
catalog you'll see there is full sample
code to go well pretty much complete
applications and it works
I'm just amazed that this is in alpha
and it just everything's working so far
just shows the amount of brainpower
that's really gone into this now what
we're gonna be doing today is working
with the app bar which is this little
blue bar which we put up there but we're
gonna put buttons up there and make
those work we're not going to blatantly
rip off this demo that they have up here
I'll leave that for them but I want to
kind of key in on some other things so
I've got a new project up called app bar
demo and we're just gonna start typing
away here so import and we're going to
import the flutter material that dart
package remember we need that to work
with the material apps then we're going
to say and we're going to do run app and
in case you either don't remember or
didn't watch any of my previous
tutorials run app is kind of the main
entrance point to your application
so without run out and nothing runs
we're gonna leave that blank for now we
need to make two other classes real
quick here we're going to extend the
state full widget not the state list
widget like we've done in the past and
then we're going to make a private class
called my app state extends state whoops
of my app
so before we really start fleshing these
out what are they why do we need them
okay well the first thing we're gonna do
is we're gonna do main and then we're
gonna run app so we're gonna run my app
an instance of my app will be created I
actually should create that there an
instance of my Apple will be created and
shoved out into memory now I shouldn't
say chef dot memory shoved out to the
emulator which I'm going to actually
boot that up while I'm talking here and
then I'll just go off to the side while
it starts up now we have the stateful
widget and state now in the past we've
worked with stateless widgets what's
really the difference here well a
stateful widget and even a stateless
widget is what's called immutable
meaning it will not change and I'm
actually going to put this will not
change okay well that's great but we
want to actually change something on
screen so what we need is a state which
will change yeah I cannot type today so
to get these two to work together what
we need to do is we have a stateful
widget and we are going to actually
override the create state
so effectively what we've done here is
it looks like a bit of a circular
reference but we're saying the my app
state which extend states so just don't
think this is my Upstate just think the
state is going to be the state of my app
this guy
so our immutable widget will have a
state inside of it now in our state the
my app state we can do certain things
for example we can say string that's
great we haven't really done anything
there and let's say my state let's make
this private as well just to have a
similar code convention here now you
notice how it's already barking at us
and it's saying it's missing a concrete
implementation of state build remember
in previous conversations whenever I
said build think of build as render
we're going to build or render the
widget so we need to override and then
we're going to say widget
there now we're actually not doing
anything so we need to combine some of
the knowledge that we've learned in
previous tutorials being material app
and scaffold so first thing we're going
to do here is we're going to return a
new material app and don't forget to
your little semicolon at the end or it
will get mad at you and we say the title
is the title variable and we want the
home to be a new scaffold now this is
where things get a little interesting
here
remember we're building this in state
you really don't have to do that you
could actually have this as a stateless
widget and then have certain parts of it
be stateful but for this example I want
all of this to be the state because it
gets a little kind of cumbersome and
complex when you're doing only certain
parts of it I want you to understand
what's really going on under the hood
here so we've got our title we've got
our home and then in the scaffold we
want a app bar we've talked about this
before and in our app bar let's just get
that in there I'm gonna set that to the
title variable as well now mmm what's it
barking about here
string can't be assigned to the
parameter type of widget what are you
doing that
oh yeah cuz we got to put a widget in
there my bad that screwed me up for like
a microsecond I was like what is going
on here alright so we've got this now
that we have our home we want to put in
a body and we're just gonna say
the obligatory hello world and hmm
actually let's change this around a
little bit I want this to be a little
fancier than this we're gonna put in a
new container padding don't know why I
pick 32 just good old days when icons
were exactly 32 inches or three inches
geez 32 pixels that's the kind of day
I've had and we're going to say new
center for the child if you have no idea
what I'm doing this really should be old
school for you by now because we've been
doing this for like 20 some-odd
tutorials and then we're just going to
pop our new text right there now I
remember everything in dart is an object
so we're gonna go ahead and run this on
our device whoops
actually let's do this there we go
and we're gonna just basing builds and
runs if it doesn't then we'll resolve
any issues that we have I'm fairly
confident it will run though no I did
have some feedback and I do try to keep
up on feedback but my inbox is just
looks like a bomb went off at any given
moment so it's really if you email me
it's luck of the draw that's why I keep
pushing for this avoid Rome's facebook
group but they said you know why does it
take so long to build you have to kind
of have to have respect for what's going
on under the hood here is your taking a
language compiling that into another
language and then compiling that into a
you know whatever the device needs and
then pushing it out to the device so
there's a lot of a lot of middleware
going on there all right so here's our
app bar here's our hello world so so far
nothing's happening we can't really
click on anything so what is state okay
well what we want to do is we want to
change this hello world depending on
some sort of user interaction that's the
state the state of the application think
of state like you you have a parent
you're gonna go ask your mom hey mom can
I go stay over at a friend's house well
depending on her mode her state is gonna
depend the answer you get back right so
we're going to just jump out here into
the app bar and this is why I do like
you know pushing these out into
different files because they can get a
little big but for this example I'm just
gonna keep everything all nice and neat
and we're gonna say action see notice
how this takes a list of widgets but it
doesn't give you the actual code you
need so you need to say widget and there
we go so we're making a list of widgets
here and then we're gonna say hmm what
could we put in here well we could put
just about anything we want because it's
a widget so we can even say like new
text we'll just say a la la la and let's
do that save that flip back over Oh
didn't like that oh it's because I got
that in there
there we go you can see there's our text
up here lalalalala now what that really
means is we can put anything we want up
there because everything is a widget so
let's just start putting things in there
let's say we're going to say new icon
button you notice how as for an icon and
pressed so there's two properties that
we're gonna have to fill in we really
don't have to because they're no but it
would probably be a good idea if we want
any sort of real functionality here new
icon and then we're gonna say icons dot
and then we have tons and tons and tons
of icons to choose from here I'm just
gonna grab some at random I'm gonna say
like add alerts and then on pressed we
actually want to give this a function
alright so here we're just going to say
if you're wondering what this is doing
this is basically saying hey use this
function and call this code
now notice the syntax here is a little
bit different we're saying press
semicolon and then we have this
anonymous function here's our scope
brackets we've talked about scope before
and here is the code we are using now
notice the underscore meaning this is a
private method you can't call this
directly out of the class and then here
we're just going to print the message
that way we can see what's going on and
we're gonna grab this a few times what's
going on here
I forgot my commas now some things to
note right off the bat is a we're
sending it an array of widgets B the
icon we chose is over on the left here
gives us nice little preview of what
we're gonna do here if you're wondering
how these icons actually got into the
application well they're included that's
right you heard me correct if they're
included
I don't want print sake people there
people there is a people so you can see
how we have like an alert a print and a
people and if we actually run this I'm
gonna stop and just rebuild the whole
thing I was seeing some some errors
popping up there I just wanted to
rebuild the whole thing make sure it's
gonna work here all right so we've got
our beautiful little icons and let's and
let's say P print pressed and people
pressed I like pressing people people
piss me off sometimes so I like pressing
them alright so we had our hot reload
and let's just click this you see
nothing happens so I mean on the screen
nothing happens but we can see it here
we're getting a lot of action and what's
going on into the hood is we're actually
reading directly off the device and
there's our print statements print
pressed people pressed that gives you a
good way of telling what's going on in
the application so what we want to do
now is when we click one of these this
guy right here will update that's called
application state so far we haven't
actually done anything with
so because we're calling this method we
know that we can do some things the
first thing we want to do is actually
change a variable which we're going to
change this my state and let's actually
do this so what we're doing now is the
child in here of the center is going to
be the my state variable so you can see
it's now blank because we have
absolutely nothing in my state and let's
just type in no state that way it's
pretty obvious what's going on here mmm
didn't actually like that let's rebuild
it just because I want you to see that
that variable equals no state and what
we're gonna have to do once this is
built and gets up and going is we're
gonna actually have to call something
called set state and what set state does
yeah you see now there's no state and
nothing's changing because we haven't
changed anything yet but what's that's
set state's going to do is it's going to
set the state of this variable I mean
for example if we just say my state
equal test actually let's set it to the
actual message let's see what happens
here hot reload should have taken I'm
gonna reload it anyways and we're gonna
just you see how nothing's happening
we're even going to kill the application
and restart it I know it takes a little
while to recompile but we're gonna push
it back out here just so that we can see
that nothing's happening give it just a
second it should pop up so there's no
state and nothing's changing now we are
changing the variable under the hood and
we can test that by actually doing this
see our print is still working you can
see how there's print press down here
there's all your pressed up there so we
know that variable is actually changing
but the state is not changing that's
what I'm really getting at here so what
we're going to do here is we're going to
say that state and you notice how it
calls out a function so what we're going
to say is maybe
there we go it's gonna make a simple
little anonymous function in here and in
our set state we're going to actually
update the state this is going to be a
little confusing because it's literally
the same thing that we've just done we
just did this set state takes and this
is a little difficult to explain so bear
with me but there is a memory map under
the hood called state and what set State
does is says hey find the key that has
this variable and set the value unless
you do that the state's not actually
going to change so let's run our app
again see what happens now and while
this is compiling cuz it's not there yet
basically we have our material app in
our material app we have a scaffold you
need the scaffold to kind of build
things up in the scaffold we have the
app bar and we have the body the app bar
we have three icon buttons each button
has a built in icon that we can preview
over on the left and it's calling this
pressed method and then in the body we
have a container which has a child of
cetera which has a child of text which
is actually reading the my state
variable which is right up here we're
changing that you guessed it in the set
state so you see how we have no state
now we have alert press now we have
print press now we have people pressed
this is needed because if you go like
this and you just kind of jump over to a
different program and then kind of jump
back you can see the state is saved if
you didn't have the set state that would
blank out everything would go right back
to default which if you've ever worked
with any sort of like Android
programming before using androids do
you've noticed that right off the bat
how you have to load the state
automatically well all right you have to
load it manually where this is all
loaded automatically for you
I have to say this is a lot easier to
work with than some other things that I
work with such as like mob ex and redux
and things of that Redux just broke my
brain I must have spent two weeks
playing with different applications
trying to get it to work correctly and I
it's absolutely hated redux mob ex was a
little better but I think this is really
fluid really simple so while we're on
the topic because I did say we're going
to work with the app bar here what kind
of things can we put in the app bar I
mean we know that we can put text in
here we can put icon buttons you can see
it well maybe you can't see it cause
it's under slow mode I hate that little
slow mode ribbon let me move that up
here you can see there's our text let's
try to add a race button why not oops so
there's our race button and what we want
to do here is we want to say
we just want some text on there yeah
we've done this before I think we had it
in the body actually but what we want to
do now is actually just put it in that
app bar and I don't think we actually
made the button work in the last
tutorial so let's make this work I call
a super button of doom why not
it's been a Monday build that and you
can see now we have our text we have our
little icons and we have our super
button of doom so you can put pretty
much any widget up in the app bar it's
not really restricted like it is in some
platforms and you notice how that the
text actually puts these little dots
with these ellipticals in there and we
can rotate the device and you can see
how it automatically rotates with it and
then it expands it back out so it's
pretty neat the way this works and we
can do some really cool things so
there's our super button of doom and uh
that's it for this tutorial
some quick notes if you want the source
code you can go out to my website void
roms com click on tutorials click on
github and it takes you right out to the
actual tutorials and I've got many many
other tutorials in other languages if
you're so inclined feel free to donate
my websites 100% run off your donations
and if you're still listening you're one
of the cool people be sure to join the
void realms Facebook group there is I
think coaching on 1800 other programmers
out there all walks of life we
definitely help you out with your
projects if you email me or directly
I'll try to get back to you but it's
probably take several months at this
point my inbox is just annihilated
that's it thank you for watching I hope
you found this educational and
entertaining