Flutter Tutorial for Beginners #7 - Stateless Widgets & Hot Reload

Key Takeaways

alright then so right now when we make any kind of change to our app in the code over here and we want to preview that change what we have to do is go down to this run tab down here and then click on this hot restart button and then that essentially refreshes the app over here so we can see that change now that's ok but we're making changes quite a lot and we have to keep going down here and pressing the refresh button and it would be nice if there was a simpler way now flutter also comes with something called hot reload meaning whenever we make a change and save it over here the app can auto reload in the preview screen now right now that's not working and that's because of how we're structuring our code over here in order for us to use hot reload we're gonna have to talk about something called stateless widgets so what I'm gonna do is come down to the bottom over here and I'm going to create a stateless widget first of all now we can do that using a little snippet in flutter just st which stands for states and then less and then tab and it creates this class and this is going to be a custom stateless widget class so we're gonna give this a name I'm just gonna call this test and what we're doing is just creating a class called test which extends stateless widget so in essence we're making our own custom stateless widget here now pretty much everything remember in flow to every widget is just a class so when we're using these things up here like the text widget the floating action button widget the textile widget is Center widget these are just instances of those classes in a flutter these are all just widget classes now these are all built into the framework what we're doing down here is basically making our own widget class and that's extending the base stateless widget class in flutter so we're inheriting all of those call functionalities in stateless widgets now I keep using the word stateless when I talk about this widget but what does that mean exactly well in flutter we can have either stateless or stateful widgets right now we've created a stateless widget and that basically means that the state of the widget cannot change over time for example the layout or the colors or any data we use inside that widget has to be final and it cannot change over time as we use the app it can contain data but that data can't change after the widgets been initialized stateful widgets on the other hand they can contain States which can change over time so things like it's call it's layout or any data inside it it can change over time so for example some kind of counting widget that displays the number of flies that you SWAT on an app that would have changing data over time as just what more flies on the screen the number would go up right so we would use a stateful widget for that so depending on what we need in our apps for our different parts of it our different widgets we'd either choose a stateless widget or a state full of widgets right now we're using a stateless widget but later on in the course we will also look at stateful widgets as well okay then so at the minute we're creating this stateless widget right here which is called test and I'm gonna rename that home because ultimately this is going to represent all of the content we're going to show on the home screen and this is extending stateless widget which means we can't have any state that changes over time inside this widget now I mentioned that the reason we're doing this well one of the reasons we're doing this is because it's going to enable hot reload for us and we'll take a look at that in a minute but another reason we're going to do this is because it's going to make our code drier and much more reusable we can easily reuse our own custom widgets later on and we'll see that in action later in the course but anyway how does this stateless widget help with hot reload well first of all we have inside it this build function right here and we can see the return type in front of the function is a widget and that's what we're doing inside this function we're returning this container widget right here now we've not seen the container widget but don't worry about that for now all we're doing is returning a widget now ultimately what I want to do inside this widget is return a widget tree of our homescreen now we've already kind of created that over here we've done it directly inside the material up inside the home property so what I'm going to do is just copy or rather cut all of this scaffold stuff everything inside it I'm gonna cut it so we're just left with that home property and I'm gonna return it inside this build function so now we're returning this widget tree which starts with the scaffold and all of the different widgets inside it nested now at the bottom I just need to get rid of this comma because now we're not adding another widget after it we just replace that with the semicolon because remember we're returning something here and at the end of a return statement we have a semicolon anyway now we're returning this widget tree but back to this build function how is this helping goes with the hot reload problem well this build function right here this is what is responsible for building up the widget tree inside the stateless home widgets so all of this stuff right here now whenever we make a change to the code inside this widget tree flutter is going to detect that when we save it and it's going to cause the build function to rerun now when this reruns flutter is going to update what we see in the screen over here that's hot reload in action now it doesn't mean to rebuild the whole app that we create just where the code changes inside it so in the future we could have many different stateless widgets and if we make a change to one of them inside our code flutter only needs to rebuild that widget for us and update that on the screen so that's going to result to a much quicker update in the device preview so we don't have to go down here now to run and then Hawtree start to see that in action so let's do now a little change all I'm going to do is just come down to here and say click me and press save and now if we do this then we have an issue so let's go down here and okay I know why this is it's because we're not actually using this home widget we've built this widget but we're not actually using it anywhere and what we want to do is use it for the home screen in the material app so let me now do that and we're saying okay well for the home screen we want to use this custom home widget that we've created right here which is returning this widget tree so now all of this should show on the home screen so let me now save this and now it's reloading and now what we to begin with is one quick hot restart first of all just to capture any changes then you can see click me now if I take that off if I change something inside this widget and save it now it should automatically reload over here we don't have to go to run and then hop restart again because we may be changed inside this build function right here and it's detected that change its rerunning the build function and then updating that over here that is hot reload in action now I said that this makes our code drier when we use our own custom widgets like this and it does and that's because we can now reuse this home widget anywhere else in our app if we want to we might not necessarily do that because we only have one home screen but if we made up a widget that we want to use in several different places on different screens in our app we could then reuse this same widget every time we need it instead of rewriting out the code for every place we just put it in a widget like this and then we use an instance of that widget when we need it like this so that's nice now there's one more thing I want to talk about in this video and that's this override thing right here now this is used to say that this build function right here will override the one defined in the classes ancestor so the thing that we extend from which is stateless widget because that has its own build function as well so we're saying we want to use this build function because we're using this override thing right here we want to use this build function instead of the one we initially inherit from this stateless widget that's all this means we're redefining the build method right here so now we've done that whenever we make a change we don't need to click our hot restart anymore well we will be using that later on when we start to use state and we want to reset that state or data in our app but for now we don't need to worry about coming down here and clicking this every time we make a change