Flutter 31 - Switch Widget Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody's Brian welcome to the 31st
flutter tutorial we are going to be
looking at the switch which is very
similar to the check box or the radio
button even in the fact that it has an
on or off
it's graphically different because it
switches back and forth thing but like a
light switch it's just an easier way of
letting the user know what's going on
here
so typically you would use this for like
a setting of some kind you know like do
you want to give feedback yes or no turn
it on or off kind of thing so we're just
going to dive right in here and we're
going to say import package import
material make our main function here and
then let's extend the stateful widget
and then we're going to extend the state
of that stateful widget and you notice
they're kind of deviated a little bit I
see underscore state instead of my app
state just so it's a little easier to
understand what's going on under the
hood I had some questions about the
difference between the two
I remember in dart anything that starts
with an underscore is private so that's
not accessible outside here so we're
going to say run app I'm going to make a
new material app I set the home to in my
app and here we're going to just simply
override this and we're going to say
I screwed that one all up it's been a
while since I've done this tutorial I
took a little break over the holidays so
now I'm gonna fat finger just everything
there we go
and then here we're gonna say override
all right so pretty simple design
pattern we got going on here we have our
main function which creates a new
material app through the run app and
that's what's going to actually run we
have our state full widget which is
going to hold a state the state of that
is going to be called by create state
and here's the actual state now in the
state we're going to call the build
function which remember whenever we
build Cody fingers we're gonna actually
render something on the screen so we're
gonna return you know scaffold and this
is where the real meat of the program
comes into play I'm gonna say app bar
yeah I figured that I'm just gonna say
switch demo and then the body we're
gonna say new container and we're going
to have some padding in here
and then we're gonna have an array of
widgets inside of a column here and in
here we're just going to make a new
switch and you see how it hasn't value
in a non change so automatically it
wants to know hey what's going on here
so with that you should understand that
we gotta actually set some things here
so let's say full value false that's our
initial value and then we're to say void
the ways that they state here now in set
state we're gonna actually set the value
so we say value equals the value pretty
simple so we get our initial value here
and then the unchanged we're going to
say
maybe if I could actually type alright
so then we're gonna say unchanged value
so then we're going to just simply set
the value here so if you've kind of
skipped the previous 30 tutorials
basically what's going on here is we
have a private variable called value
that we're holding in the state when the
slider sorry when the switch is actually
changed it's calling this unchanged
using the value of the current value of
the control whether it's on or off
shoving that into this function here as
you can see we're calling it there and
we're setting the state that's very
important to call set state because if
you don't do that well the state is not
saved and then when the screen is
refreshed
nothing happens or I should say if you
don't cost that state the screen never
refreshes that's actually more accurate
here and the initial value or the value
that's bound to it is this underscore
value so we have this private variable
here let's go and fire this up run this
on our emulator here I had a lot of
positive feedback about the flutter
tutorials I'm actually pretty happy to
see that I was kind of wondering when I
first started these how how many people
would actually even be interested in it
and turns out quite a bit of you guys
actually are I was really shocked for
such a new technology especially in
alpha I mean it's not even in beta yet
it's still in alpha there is just you
mungus amount of feedback on this all
right so here's our little switch you
can see we turn it on turn it off turn
on turn it off and it follows the design
pattern very similar to what we've seen
previously with checkboxes and things of
that nature so with that we're also
going to check out the you guess at the
switch list title has the same signature
here so we're just going to copy and
paste this
yeah we're gonna break this down a
little bit more whoops
screwed that all up so embarrassed all
right there we go so with this we're
gonna actually add in a few little
things here we're going to say a title
now someone did ask with titles you're
saying new text why wouldn't you just
put in quotes because it's actually
expecting a widget so for the title you
can put anything you want you can put
another switch you can put a checkbox
and put the image you can put custom
control anything I'm just putting a text
in there because it's very easy to do
that all right so we have our title
what's that the active color well we're
gonna set colors that red and for
secondary we're going to say just a Home
icon here
you notice how often left it actually
previews it a little bit we're going to
rerun this bad boy and now we have our
switch and because they have the same
value that they're bound to it doesn't
matter which one that we click the
difference being this you would have to
add like extra text or whatever well
this is all one control so you can even
click on little house here and it turns
it on or off so that's it simple easy to
use if you found this tutorial a tional
or even funny let me know be sure to
visit my website void roams com click on
tutorials for the source code for this
and all other tutorials it takes you
right out to github and note that this
website and everything that you're
watching is 100% funded by your
donations that's why I don't have
advertisements on the videos so if you
are a corporation or if you've just got
some extra money be sure to you know
feel free to donate
a lot of that times that goes towards
funding the website running the host and
all that stuff so thank you for watching
and I'll talk to you guys later