Flutter 29 - Checkbox Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this Brian welcome to the 29th
flutter tutorial today we're going to
continue our conversation on some basic
widgets we're going to cover the check
box check box is a pretty basic little
component or I should say widget but one
thing we're also going to cover is the
check box list title which is an
interesting widget it's a kind of a
combination of many and we're going to
go over that as well so let's just jump
right in here I'm going to import our
you guessed at the flutter material
package will make our simple pattern
here you think I'd have this down but
like in my sleep by now we've done this
so many times now my app state extends
state we're going to extend the state of
my app we're going to do the run app
function let's do this I'm gonna do a
new material app I do new my app let's
get that out there so we can see what
we're doing kind of excited for
Christmas it's like a couple days away
here
all right we've got our state I'm going
to build this out all right we are going
to return a new scaffold alright so
there's our text
all right so now we're ready to get down
to business here save our work
and the first thing we're going to do is
we are going to well you guessed it
we're just going to add a new check box
so we have value and then on changed so
you can already see that we've got some
some interaction here and this is very
similar to the text field which we cover
the last last tutorial where we have to
track on change because this is a
stateless widget it's not going to track
it for us so the first thing we need to
do here is we need to say little is
check equal false copy that
grab our value and then set state
let's actually make this private there
we go so now we are going to track the
value of whether or not that is checked
so we're going to say the value of this
is checked I should say it is the is
check variable and we want to track that
through the on change so we'll say bull
value there we go so let's push this out
and see what it does here
where is my emulator there it is so pull
our emulator up wait for this to deploy
it gonna take just a second my
computer's are in slower than normal I
don't know what's going on with this
thing I think it has a cold it caught
the cold that I had so you can see dead
center of this is our check box and we
can check it and uncheck it not very
helpful hmm so we need to snazzy this up
just a little bit so let's go out here
let's just completely grab this thing
they will say new row and in our row we
want a new text and we'll say click it
hmm that's not liking that for some
reason what's going on here oh I know
what I totally forgot children there we
go alright so we initiate a hot reload
you see it says click it and we can
check it uncheck it check it and uncheck
it but if we click the actual text click
it nothing happens you got to actually
take that little box and if you have big
fat fingers like I have it's not very
fun so what we're gonna need to use next
is what's called the checklist box tile
that is a fancy name for much better
than what we've been working with so
let's just do this and we'll say new
check this box tile and bang you can see
how instantly it almost has the exact
same signature well actually it does so
we can just copy this whole little bad
boy right here instead of retyping all
that garbage out wait for our hot reload
did it I'll reload no it didn't
let's just push it out boo dependencies
could not be established what hmm
expected to find we screwed something up
here alright let's figure out what we
did here at the unchanged bool what is
this messing up on me here hmm I see
what the promise we're missing one and
trusty ha trailer it works as we expect
so now we've got this little guy over
here now because we have linked these
when I say linked I mean they're both
using the same variable and we're
tracking that variable through set state
when we click one the other one's going
to change also that's the magic of State
if you didn't really understand state
before maybe you just had a light bulb
moment just kind of go over this again
both of them are using the same variable
and we're saying on change so both of
them are saying unchanged so it doesn't
matter which one we do it's gonna change
that variable because they're both have
the same variable and that very
is being set through set state it's
going to track the state of that
variable whether it's checked or
unchecked thus you get this dual action
going on here so that's nice and all but
we still have the same problem where we
have this checkbox and nothing else so
let's fix that let's break this down
just a little bit alright so first thing
we want to do here add in title new text
click me you can see how now we can
click the text and it acts this whole
thing acts as a check as a giant
checkbox so we've kind of done this
where we have a row with a text amount
but the whole thing is now clickable and
let's just say we want to do active
color equal colors dot red because we
want to really you know differentiate
this bad boy and we want it secondary
and I didn't I don't know what - let's
just say home why not so we're gonna add
a few things here so now we have an icon
and it changes the color when it's
active pretty neat huh so that is the
check box and the check list tile it's
called a tile because well it's in the
shape of a tile but it makes life a heck
of a lot easier so if you've got really
finicky users or a really finicky
production manager and he doesn't want
to try and click this little guy you can
just use a checklist tile and life is
good
that's it thanks for watching this I
hope you found an educational
entertaining if you're looking for the
source code for this and the other
tutorials once again go out to my
website void roams com click on
tutorials got to github go out to
flutter and you can just clone all of
the code right down to your machine and
if you're still listening you're one of
the cool people you are invited to join
the void rooms Facebook group we have
1700 other programmers out there and I
had a few questions people say why are
you always plugging the void roams
Facebook group because it helps me when
I have a question the first thing I do
is go out there and ask and then I
usually get like two dozen people with
answers so that's it hope you find an
educational and thank you for watching