Flutter Tutorial for Beginners #16 - Stateful Widgets

okay the my friends so far we've only used stateless widgets inside our project which is fine because we've not needed to use any kind of dynamic data or states inside this widget which we change on the page remember a stateless which is one that doesn't really change after it's been created it doesn't contain any kind of state of data that changes over time or in reaction so we use it interacting with it on the screen like clicking a button then changing something but what if we wanted something inside our app to change over time or to display some form of dynamic data for example we could have a button at the bottom which when clicked is going to change this ninja level it might increase it now that would mean that the widget would be changing State over time and for that we need to use a stateful widget because remember a stateful widget is one which can change state over time or it can contain dynamic data which changes so the data that changes over time is going to be stored in what's known as a state object so it's going to contain values which can change such as a number that we output on the screen or maybe a color which changes the background color either way it's gonna change the state of the widget right so when the state changes it means that obviously something has changed in the widget and therefore the UI over here is going to need to update to reflect that so let's try creating one of these stateful widgets and see what this is all about so what I'm going to do is before I alter any of this code is just a zoom right to the bottom over here and create a stateless widget or rather a stateful widget from scratch and to do that we can use a snippet called st ful and then press tab and that creates as a stateful widget and I'm just going to call this test for now now if we take a look at this it's actually created two classes for us right here the first one is this stateful widget class so this extends stateful widget much like up here this extended stateless widget this one down here extends stateful widget so we're inheriting from this now now inside here we have this function create state which is then returning this or the function now this is instantiating this second class that it creates for us and this is a state object so it's building a state object for this stateful widget which we just created and it's linking this state object to this widget so now inside this state object right here which is just another class we can actually define data and we can change that State over time now also inside this state object we have this build function again and we return a widget so this is the same as up here where we have a build function and we return a widget so when we use this test widget in the future then eventually what's going to happen is it's just going to return this widget tree that we create right here okay so we have the two classes we have the actual widget itself which creates a state object and that state object associated with it can now contain data and returns this widget tree but we can now output that data that we create in this state object inside the widget tree and when that data changes over time if it does then this widget tree is going to update to reflect that change in data so say for example down here we could create an int counter and that could be equal to I don't know 0 or want to begin with and then down here we could output that counter and when it changes it's going to rebuild this widget tree and it's going to update where the counter is updated so to begin with we would be outputting 1 if we output in the widget tree and then if this data changes we rebuild and eat outputs the updated value okay so what we need to do now is figure out a way to turn this thing over here this ninja cab which is currently a stateless widget into a stateful widget so that this data this level over here can be dynamic and we can change it over time so what we could do I suppose is we could take all of this widget tree that we have right here we could you know cut all of this and we could potentially paste it right here like so and now this is a stateful widget and we'd rename this to be ninja card this over here etc but I'm not going to do that instead I'm going to show you a quick way to turn a stateless widget into a stateful one okay so let me just undo all of that we're going to delete these two new stateful widgets that we just created and now I'm going to come to the top oops I've deleted too much there how about so let me undo undo undo so we get that template back now let me delete these new stateful widgets okay so we're back with our stateless widget over here for ninja card I'm going to highlight this and then go to the Action menu and click convert to stateful widgets so that's nice it's taken our widget and it's converted it to a stateful one and now we can see two classes we have class ninja card which extends stateful widget and inside we have to create state function which is returning an instance of this state object right here so inside this state object we now have our build function with all of that widget tree that we defined earlier so it's converted that stateless widget now into a stateful widget so now what we can do is define data in here or state which can change over time now before we do that just a quick thing the way we use this stateful widget is no different than how we would use a stateless widget we still use ninja card like this because that is still the name of this stateful widget it's just that now we have a state object associated with this and we've moved the build function into that state object class instead okay but it's all still linked to this widget at the end of the day this is still the widget we use all right so then in here let us now define some kind of data or state that we want to change over time now I want it to be this thing here so what I'll do is define an integer and I'm going to call this ninja level like so and to begin with I'm going to set this equal to zero now what we want to do is actually output these value as the ninja level over here instead of just outputting eight to begin with so to do that we need to scroll down to where we're actually outputting this number and it is down here where there it is so instead of a we now want to output this variable which is called ninja level now inside a string if we want to output a variable we do that by doing a dollar sign and then the variable name which is ninja level like so okay so if I save this now then to begin with we're gonna get an error because it says ninja card is not a subtype of stateless widget but if I go to the Run panel and then click hard refresh or rather hot restart then we should see that now so whenever we use data if we want to reset that data then we need to press this thing right here to hot restart it and get that fresh data so now we have that output but what we'd like to do is change this over time now I'd like a little button down here to click so that when we click that it changes it now we've seen how to do that in the past it's a floating action button that we can add to our scaffold so if we come to the scaffold over here we can below the app bar just add in a floating action button so floating action button and that is a floating action button widget in itself so we need this unpressed property so that when a user clicks it then something can happen but first of all I'm going to add a child property which is going to be an icon and that icon is going to be an add button so I'll say icons dots add and it gets this little plus button right here so I'm also gonna give this a background color so we'll say background color and that is going to be colors dot gray and it's gonna be of strength 800 so we'll place that in square brackets okay so let me save this first of all and we should see this plus icon now when we click this I'd like to increase the level so we want to edit the value of this so let's do that inside this unpressed function so what do we do to update this and reflect that changing the screen well we don't just set the level as is so if I say something like ninja level plus equals and then one so we're adding one that's what plus equals means it takes the current value and adds one to it if I do that then save it if I press this it's not gonna work so even though we might be changing this it's not rebuilding the widget so what we need to do instead is use a function called set state like so and this takes in as an argument a function in itself so whenever we call set state we increase or we set the state of that widget inside here and what this does when this is called is trigger the build function so then it rebuilt it with the new state so what I'm going to do is say now ninja level plus equals 1 so we're taking the current value of the ninja level and adding 1 to it inside this function inside set state so whenever we want to change the state or the data inside a state for Bridgette what we have to do is use set States inside that we pass a function and inside that function we update the values because this is the only way when we use set state that triggers the build function to rerun and then update wherever we output this thing over here with a new value so if I save this now then you can see it's currently 4 because I press this a few times before and it's just updated on save but now if I click on this plus icon now we can see it updates in every time I click on it ok and that's because now we're using set state to change the actual value and set state is what is triggering this thing to rerun so every time we call this set state it triggers the build to rerun and where the data is different it's going to update that on the screen ok so now we've seen how to create a basic stateful widget and update the state in that widget in the next video what I'd like to do is start a fresh project and talk about lists of data inside flutter apps

Channel: The Net Ninja

Views: 167,836

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, flutter for beginners, tutorial, dart, dart tutorial, dart and flutter, dart flutter, dart tutorial for beginners, flutter vs react native, stateful, stateful widget, stateful widgets, statefulwidget, flutter state, flutter stateful widgets, flutter stateful, state object, flutter setState, setState

Id: p5dkB3Mrxdo

Length: 10min 51sec (651 seconds)

Published: Thu Sep 05 2019