Flutter Tutorial - Stateful Widget Lifecycle - Flutter State For Beginners

how the stateful widget lifecycle works needs to know every flutter developer the state object of the stateful widget goes through these seven steps and we will look at them more closely if you are new here subscribe to my channel and make sure to watch this video till the end let's get started by creating a new stateful widget the first method which is be called is this create state method and this creates in our state object and then our lifecycle begins in the beginning of our life cycle the init state method is called and this is called every time when a state is created and inside of it we can basically initialize our widget before it is built let's create in this case a number field for our state and in our init state method we can then get our number which we get here from the outside world over our constructor and we can put this number inside of the number of our state and we want to look here first of all at a basic life cycle so we have already looked at the crate state and the init state and after this comes the build method which basically creates our ui and at the end of our life cycle there is this dispose method therefore let's create next the build method and here you basically create the widget which you want to display so in this case i put here text widget inside which then displays our number and lastly you can call here this dispose method and this method is every time called if the life cycle of your states ends and i will also print it so that we can later look at it now if i hot restart our application you see he is going through these steps first of all he is creating the state then he is initializing it and then he is building our ui now i want to build more widgets of this number widget so i will create here five number widgets and now if a hot restart you see he has credit number one and also number two so here on the screen you see number one and below it we have number two and therefore he's already building it if you scroll in this list view until the bottom you already see that he has also destroyed some states so he has called here this dispose method of the second state and also the dispose method of the third state and after the dispose method is called the build method will never be called again because the state object or the state widget this number widget is removed from the widget tree now let's put again only one item inside of our list and then we wrap here our text widget inside of the text button and if you click on this text then we want to execute some functionality and what we want to do is we want to increment here our number in our state and therefore i simply go here inside and call number plus 1 and now comes the set state method into the game and if we use here the set state then we basically tell flutter that he should call the build method again and here it should basically build our whole method again with the new state which we have changed right now so basically if i click here on this text you see that he is calling the set state and after this he is calling again the build method and this happens every time if we click on this button the next most important method is this did update widget method which we also want to implement right now therefore we go to our number widget state and here we implement then also this did update widget method and within this did update widget method we can basically respond to changes of our widget so this means if some fields of our constructor change then this method will be called and then we receive here the old state of our widget and we also receive the new state of our widget and inside we basically can then check if for example the old widget number is different than the new widget number and if this is the case then the number changed and we can basically react on this change to execute this functionality we simply go to our parent widget and then we need to change here basically this number parameter and therefore we call here this number widget and here currently the number one is going inside and we want to increment this number and i will put it simply inside of an app bar and here i create a button to add a number and inside we basically call the number plus one and we also call set state to update our ui and now we can try it out so i can click here on this plus and then you should see that the number has changed and the did update widget method was called so all in all if one of these parameters changes through the parent widget then we are calling here this did update widget and then you can react on this change and execute some functionality on it and lastly there are also this the change dependency method and deactivate method in our life cycle however these both methods are rarely used in flutter and only the flutter sdk or some plugins are using these methods if you like you can also overwrite them so you go to your state class and then you overwrite here this method did change dependencies and this method is every time called if some dependency changes and lastly you could override the method deactivate and this method is basically called every time when the widget is removed from the witcher tree temporarily and also if the widget is moved from one location in the widget tree to another location in the widget tree so in total if the state for widget moves in the widget tree then this method is called however if the widget is removed completely from the witcher 3 then the dispose method is cold instead and here you can basically clean up everything what your state has called in this init state and clean everything up again hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Applause] you

Channel: HeyFlutter․com

Views: 17,716

Keywords: flutter stateful widget lifecycle, flutter stateful widgets, flutter, flutter tutorial, flutter tutorial for beginners, flutter for beginners, lifecycle, setstate, build, widget lifecycle, flutter life cycle methods, flutter lifecycle, flutter basics tutorial, flutter initstate, flutter state methods, flutter lifecycle methods, flutter basics, ios life cycle, android life cycle, flutter life cycle, stateful widgets, state object

Id: FL_U8ORv-2Q

Length: 6min 25sec (385 seconds)

Published: Sat Jan 30 2021

Reddit Comments

[u/JohannesMilke]

Source code: https://github.com/JohannesMilke/statefulwidget_lifecycle_example

Follow me on Twitter: https://twitter.com/JohannesMilke

Let's explore how the Stateful Widget Lifecycle works in detail and how to react to changes of widgets in Flutter.