Flutter Crash Course #16 - Stateful Widgets

Key Takeaways

okay then my friends so far we've made a couple of different custom widgets the home one and then also the coffee presss one which is actually embedded in the home one somewhere now both of these are stateless widgets as denoted by this thing right here where it says extends stateless widget and what does that mean exactly well it means that these widgets the home one and the coffee presss one will never have their state changed for example they don't contain any Dynamic data which might change over time or in response or something like clicking a button also their uis don't change either nothing changes size color position we don't hide or remove content in other words once a stateless widget gets built using the build function it rarely gets rebuilt outside of a few edge cases it always stays pretty much the same so if we ever wanted a more Dynamic widget that might show changing data or rely on changing data or update Hui quite frequently maybe in response to a user event then you'll need to use a different kind of widget a stateful widget so the stateful widget can contain States data or values that change at some point and then trigger a rebuild of the widget Tree in response to that uh State change to reflect it for example in our coffee preps widgets we want to Output a strength for the coffee and also a number of sugars and I want those to be output by a sequence of these images the Coffee Bean and the sugar cube so say for example we set a strength value of three we output three Coffee Bean images if we have say Two Sugars in the coffee and the value of that Sugar state was two we would output two sugar cube images and when those values change the number of images that we output for each of those uh values updates to reflect that change so if I was to click on a button to increase the strength from three to four then in response to that we rebuild the tree and output the extra coffee bean image so there's four showing instead of three and the same would be true for sugars too and that's what happens with a stateful widget we can Define values which are just regular variables within the widget and then we can update those values and Trigger the build function to rerun and rebuild the tree to reflect those value changes okay then so that's what a stateful widget is and why we' use them now let's try turning this stateless widget into a stateful one so we can use some state within it now there's actually a really easy way to convert a stateless widget into a stateful one within vs code and that is just to click on the class name for this widget and wait for this light bulb to appear now when you click on this you're going to get a little context menu with a couple of things we can do with this class what we want to do is convert it into a stateless widget so just click on that to do it and when you do that you're going to notice a few things that just happened first of all this coffee press class now inherits from State full widget and not stateless widget so now it inherits the ability to have States secondly the class now contains this create State method which returns a state object with the generic type of coffee presss passed into the state object now you don't need to worry too much about this syntax just know that we have this create State function which gets us a state object for this coffee prefs widget and Associates that state object with this widget the way it gets that state object is by making an instance of this coffee pref State class which vs code kindly created for us as well when we turn the stateless widget into a stateful one so you can see that this coffee press State class actually extends the state class which is why when we create an instance of this class we're returning a state object now it's inside this state class right here that we have the build function which Returns the widget trick so flutter has now moved this build function from the widget class itself into the state class right and that's because when we use state or data we Define that state within the state class and since the build function most likely relies on that state we have the build function within the state class as well again a lot of this syntax will become second nature to you when you start building more stateful widgets but the key points to remember are these first we now have two classes one for the widget itself which extends the stateful widget class and then one for the state which extends the state class second we override a create State method up here in the widget class which returns a state object for this widget by creating an instance of this second state class and third it's inside this state class that we now have the build function and it's in here as well that we'll be creating State values for that build function to use within so then now we have a stateful widget let's have a little go using some state within it so what we're going to do in this lesson then is we're going to create two pieces of State one for the strength of the coffee and one for how many sugars are going to be in the coffee and we're going to Output those values right here where we hard Cod three at the minute for the strength and two for the sugars so first of all let's create those State values and we do that inside this state object right here so let's create an integer for the strength and we're going to set that off to be one to begin with and then for the sugars we'll say one as well so these are the initial values of these two pieces of state and this is all we do by the way we're just creating variables there's nothing special about it just two variables that we can use now within this build method so what I'd like to do is dynamically output these variables instead of hardcoding these things right here so let's come to this text widget and we have to pass a string into a text widget so we'll pass a string and then to Output a variable within a string it's dollar sign then the name of that variable which in this case is going to be strength and then if we hover over this we can see invalid constant value so that's this thing right here so now because this text will change at some point or flut is detecting it might change at some point because it's based on this variable it's saying look we can't make this a constant anymore because it might change so get rid of that let's do the same thing down here for sugars so instead of two dollar sign sugars get rid of the const as well and there we go so if I save this now we're going to see one and one over here now at the minute it's always going to be one because we never increase or decrease these values so let's do that now so we know that when we click on these buttons right here it invokes this function increase strength and increase sugars so these two functions right here so when we increase the strength what we want to do is basically increase this number so let's do that I'm going to say right here that the new value of strength is equal to and then we're going to use a Turner operator actually we could just say strength + one like this right and then it would basically add one to whatever strength is but if we do this then it's going to go to 1 2 3 4 5 6 7 8 9 10 there's going to be no upper limit so we could get to 200 and that would be bizarre I'm not going to want to show eventually 200 coffee beans on this row so I want there to be some kind of um upper limit and that upper limit is going to be five so we're going to use turn operator to say look is strength less than five if it is then we can still add one to it if it's not then we're going to recycle back around and set strength to be one again so as soon as we get to five if we press plus again it's going to go back to one all right so we'll say strength less than five and then a question mark this is how we create a turnning rate operator so we do a little condition first of all and then we have two values right here after the question mark the one on the left of a colon which is if this is true will execute and then one on the right of the colon if this is false it will execute that instead so let's say strength plus one here and then a colon and then we'll just say one so we're saying strength is equal to figure this out if strength is less than five then strength is equal to strength + 1 if strength is not less than five meaning it must be five at this point then we're going to reset strength to be one instead does that make sense all right so we're going to do a similar thing for sugars so let me grab this thing right here and I'm going to paste it down here so we'll change this and this and this to sugars and this time I want sugars to be able to have zero as well because that makes sense you probably won't have a strength of zero but you might have zero amount of sugars in your coffee so I want this to be the initial value or rather not the initial value the initial value is one over here but once we get to five sugars if we press again then it recycles back around and it goes to zero rather than one okay all right then so if we run this now if I save this what's going to happen is it going to work well we are changing the number and we're outputting those numbers right here so you would think it would work right so let's try this no and no so they're not working so what's going on then well we are increasing these values we are doing that but that doesn't mean anything if this value changes it's not going to automatically re-trigger flutter to run this build function and therefore update this because this build function needs to run again for this to be updated so how do we trigger that build function then if it's not just changing the values well we have to put that change with inside a special function called set State and this is a little bit like react where we set state or set a value of State in a component so I'm going to say set State like so and this takes in a function and inside this function we can do whatever change in state we want so this for example now if we put that with inside set State then this set State function does trigger a rebuild right here once this is done so now if we increase the strength over here then we can see it goes up all the way to five then back down down to one awesome so let's do the same thing for sugars I'm going to say set State and then inside here pass a function inside the function we update the state and then we can save that and try this out and yeah now sugars works and this time it goes to zero rather than one because we said that right here awesome so then my friends now we're successfully working with States inside a stateful widget