Flutter 30 - Radio Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Brian welcome to the
30th flutter tutorial wow we got 30 of
these so far today we're gonna be
covering radio buttons or radio as
they're called they're these little
circles you've seen it before we click
one and the other one unchecks and it
goes back and forth you have little
groups of these guys so that's what
we're going to cover today we're going
to do the bare basic implementation
because these are still kind of beginner
tutorials let's just jump right in here
and we've got our material package we're
going to say an extend they stay for
widget we're gonna extend the state of
the my app alright I'm going to do run
app make a new material app new my app
we've done this before I'm just trying
flesh this out as fast as I can here
override and then we're going to say my
app state create state
alright why is this thing isn't a type
hmm perhaps if I did that
alright so let's actually flesh this out
now wagered all right oh I like that
widget that was interesting alright so
we have this now we need to build this
out and render it we're gonna say a
return new scaffold and let's do that
bang ooh do title I don't want a new
title I want any text where am I getting
these things I think I'm just typing too
fast for my brain all right so now we
have our body
all right so we've got a center let's
actually make a new center that weight
actually works and all right so we've
got a new column here and this is where
we're going to deviate a little bit from
what we've done in the past here I know
if you've been watching some of these
you're probably going okay the same old
design pattern over and over and over
again we're gonna actually do this a
little bit different what we're going to
do here is we're going to make a
function called make radios and we're
gonna call this right here
and this function will actually generate
the radio buttons for us wire everything
up and make it all nice and neat and
will return our list out so first thing
we need to do is actually you know make
some of these so we're going to say list
add new radio and you can see how it's
got a value a group value and a non
changed we're just gonna save that run
this out so the value while this thing
is loading the value is the actual value
of this specific control if you were to
select it the group value because
remember radios come in a group the
group value would be the value selected
within that group and the on change of
course is this is a stateless widget so
we have to track that state and here is
the radio button all its glory it's
disabled because we are not tracking the
on change which is why it's grayed out
as you can see we have kind of the same
problem we had in the last tutorial with
checkboxes where we don't have text or
anything so we're going to follow a very
similar pattern here and we're going to
just say I'm gonna add a row and then
children we're gonna add a new text my
background music died on me there we go
sorry about that my my headset has like
this timeout and for whatever reason I
can't get it to not timeout so if I
don't have some background music and
it's not registering through the
microphone so if it's not playing
anything through the speakers for I
think like a minute it shuts off
annoying when I'm recording a video okay
so we're gonna say radio button I'm
actually just caught radio and then you
know radio and then we have our stuff
here so let's say the value of this is
zero and we need to actually track a
value here we're going to say wow
could I have misspelled it any worse
there we go and we've seen this before
very very familiar design pattern where
we have to track the change and set the
state and we're going to say select an
equal value bang
grab this on changed and we want to
track that change here
now the group value is going to be the
selected selected value here so what's
going on is we're going to have a row
and in that row we'll have a text field
or just a text that says you know radio
and then next to it we're gonna have the
actual radio which is going to have a
value the group value that's shared
through them all in on and on on we
track change so we're going to just grab
this push that out through hot reloading
see what it looks like sure enough bang
that works so now let's just do this for
let's push that out hmm I didn't quite
work the way we wanted it to did it
there we go so now we have three radios
radio zero one two and you can see when
we select one the other ones are not
selected that's the group value right
there
we are currently tracking that in there
and we can actually just say
values zero value one value two so we
can see which ones which now we have a
very similar problem that we had with
the checkbox which is this text right
here if we were to try to click that
nothing happens and if you have big fat
fingers like me you're not you know a
ten year old asian kid it's really hard
to kind of click these specific little
things so as you might have guessed when
we go into the documentation similar to
the check box there's a radio list tile
and the radio list tile is very very
similar and we're going to actually
flesh that out right now so let's jump
back into our code here hey where's -
say for int I equals zero I less than
three all right so let's say list dot
add new radio list I'll and you see it
has a very familiar signature here and
we're going to break this out a little
bit just so it's easier to kind of see
and understand
all right let's actually push that out
there so the value we're just going to
say I whoopsie I the group value is
selected and the unchanged
is the actual value now when we look at
our hot reload bang we have three and we
have similar to what we had in the
previous tutorial where they share the
state so that you can understand what's
going on with state and you can see now
if we click off it's the entire row and
we're going to fill those values in
right now so let's actually go in here
and we're going to say title new text
give it that title right there and we've
got our on changed here we're going to
say active color colors dot red and
we're gonna give it a subtitle you know
text yeah we're just I have no idea what
to put here so we're just gonna say
subtitle here alright and of course our
favorite the secondary I'll give it a
new icon and I never know what icon
we're just gonna say home why not and in
something more production you would
actually say you know an icon for each
one and let's push that out and tada you
know its glory we now have much much
fancier looking radio buttons or I
should say radio list tiles very simple
very easy to understand control very
robust and it's kind of one of the
founding fathers of all controls ever
since the dawn of graphic user
interfaces so pretty simple pretty easy
to use one thing we haven't covered is
how to have like groups of these it's a
little bit more complex but I just kind
of wanted to let you know how that
worked
so thank you for watching I hope you
found this educational and entertaining
the source code for this and all of the
tutorials is out on my website void
realms comm you can click on that and
then you can just simply go out to
flutter and bang you pull down the
source code for all of the tutorials all
at once also if you're so inclined join
the void rums Facebook group there's
seventeen hundred other programmers out
there we can definitely help you out if
you have any questions