 Hey everybody, this is Brian and this is the 30 second Flutter tutorial today. We're gonna be doing a little bit different I know we've kind of gone through checkbox radios and switch which all follow almost the exact same design pattern We literally could have just changed one word Checkbox radio switch and it would have been the same darn thing. So today. We're gonna do something a little different We're gonna cover slider, which is actually set up a little bit differently and we're gonna cover. Where is it? Gonna take me a minute to find it here Of course now I can't find it's the Linear progress indicator. Did I pass it already? There it is right here the linear progress indicator basically a progress bar. So we're gonna cover both of those today All right, so let's just jump right on in here I'm going to import the material package for Dart. We need this for our material design widgets I'm gonna set up our basic code pattern here. I'm gonna have our main function We're gonna extend a stateful widget and we're gonna extend the state of that stateful widget and in here We're gonna say run app. This is what actually starts the application up I'm gonna make a new material app and the home parameter is going to be a new my app So we're just gonna make an instance of our class here All right. So now that we have that I'm gonna actually create our state here and in our state You guessed it We have to do our build function All right, so I've had a few questions about why this is the way this is So we'll kind of break it down a little bit. We need our import obviously for the material design package these widgets that we're working with This is all material design The main obviously is where our starting point is which we call run app Then we're creating a new material app which actually wraps in a lot of the material design and the things that we need From there, we need a stateful widget because we're going to track state when we quote-unquote track state We're just tracking that something changed and we want to see those changes now The difference between a stateful widget and state is minute but major and I know that's a complete contradiction Stateful widget means that Something in the widget will change State is the thing that actually changed inside of the stateful widget So while the stateful widget itself is not changing The state is changing The difference between a stateless widget and a stateful widget is the stateless widget does not care about change whatsoever Where the stateful widget what we're working with wants to track those changes Which is why we have to call create state because we want to say hey We have a state. We're going to create it and monitor it Whenever the build is called within our state the entire screen is going to refresh or I should say the parts of the screen That really need to refresh All of this is kind of held. I want to say like in memory sort of And only the things that change are really tracked, but then everything's re-rendered to the screen So that's kind of an answer to that So in our build we're going to return a new scaffold member scaffold is just kind of Well, it's like a scaffold. It's you know You ever seen those building scaffolds where they you know either build a building or they're you know cleaning windows There's something they have to build this structure so people can walk around. That's really what a scaffold is All right, so the app bar is just our top blue bar here We're set the title parameter to a new text All right, and then the body Not even there There we go. So the body is going to be a new container. I'm still kind of out it. I've Haven't done tutorials in a while. I'm trying to get back into the swing of it because I'm trying to get caught up Really I've got a couple personal projects That is not what I wanted 32.0 because why not and for the child we're gonna do a new Column and then we have an array of widgets for the children. All right, so In here, this is where the magic is going to happen We've gotten our array of widgets here and we're gonna say Slider value is and we're just gonna say zero for now. We need to go up here and actually create our state Notice this is a double not an int and then we have our arm changed here Which is going to be when the slider actually moves around we haven't added the slider yet So this takes a bit of imagination Break that down into our function and then we've got our set state. We're going to just say value Equals the value so we're updating our state All right now. Let's actually make this work So there's a slider and you notice how the default ones are value and on change So it's very very similar to what we've seen before And we're gonna break this down. So it's a little easier to work with. All right, so Slider also takes some other properties. We want a minimum value of 0.0. Remember, it's got to be a double and a max and we're gonna say 100.0, so let's Put that off to the side for a second here and put the value in there So we're gonna say slider value is and then whatever there are value in state is and we're just gonna run this out the device So once this run, we'll be able to move the slider around and actually see in real time that text widget will change with the slider value What we're gonna do next after this whole thing is actually working is we're gonna put the linear progress bar under it Typically a linear progress bar goes right under this app bar But I wanted to stand out and you can actually grab this and you can see how it kind of changes now You notice because it's a double it's got this 52 dot blah all this behind it So we're gonna modify this a little bit. We're gonna say value round Take care of that hot reload should switch it. Yep, sure enough hot reload took it to effect So now we've got a nice Min and max and everything in between So to add to the goodness here, we're gonna put our linear progress bar down here And we're gonna tie that into the same value so we can kind of see what's going on There's our linear progress indicator. Sorry if I call that a progress bar I'm very used to doing that and we're gonna say the value We're just gonna tie it into the value that we're using But we're gonna multiply that by 0.01 that way we get an actual Positive number here nice and smooth Let's actually say and let's just grab this Not sure if we can even do this, but we're gonna try it This may be a spectacular disaster, but I'm pretty sure we can do that. Alright, so there is our in all of its glory So really what the progress indicator or progress bar if you're from other languages and frameworks Just shows a progress so the user can see so we would say we're at 0% all the way up to a hundred now the progress indicator Notice 100% is actually a 1.0 Anything less than one means it's not there. So this is 56 or 0.558 blah, blah, blah, blah So just be mindful when working with the progress indicator that you have to give it that You can't say it's at 50% you have to say 0.5 Pretty simple pretty easy to learn Hope you guys found this educational and entertaining. I just like doing this It's kind of fun But if you if you did find this educational entertaining be sure to visit my website voidrops.com for the source code for this and all The tutorials they're all out on github if you notice any mistakes definitely contribute It helps out quite a bit and it is getting to that time of year where I need to pay for my web hosting this site and all The tutorials are 100% funded by your donations That's why there's zero ads on these videos and I'm trying to keep ads off of them because I think ads on YouTube really suck So if you've got a few extra bucks feel free to throw it my way and I will help pay the bills Thank you for watching