Learn Flutter Life Cycle In 10 Minutes

life cycle methods this is probably one of the most popular interview questions where they ask you what the lifecycle methods are of that specific framework and we have a couple of them in flutter such as in its state did change dependency did update widget deactivate and dispose we're going to go through them one by one until we feel really confident on why this exists and when we can use them if you like this kind of videos make sure to like and subscribe to the channel as well as checking out the website for signing up to the newsletter and let's get into it let's start with the most fundamental one which is init state as the name suggests this is the first lifecycle method that is called when the widget is created this will actually be called before the build method so here you can do initialization for these widgets such as setting up animation controllers or state variables now let's switch back to the code and see how we can actually implement it here we have a basic application with a simple stateful widget as the home page we're going to start off by overriding the init state method now visual code likes to do this and it's adding this to do above the init state i will move that to do down as if we check the init state documentation the super.init state should be in the beginning of the call so at this to do we can make our different implementations so an example of init state usage could be when we want to initialize a animation controller now for this example to make animation controllers work is that we need to use the mixing single ticker provider state mixing so now in init state we can go ahead and initialize the animation controller we're going to set it to a new instance of an animation controller and inside the constructor of this you will find something called vsync and when we have vsync we just assign it to this now we're just going to format this and move that to do above the animation controller one more thing we're going to do here as well is just adding a print call so later on we can see this print method being called now for the message we're just going to pass in its state here now moving over to the change dependencies which is actually the second lifecycle method that is going to be called this is called directly after init state and will be called for every dependency change for example we could change some variables depending on the theme as the film is using inherited widget now to implement this we're going to do the same as we did with init state we're going to start writing the change dependencies and that will give us the autocomplete now in the documentation for did change dependencies it doesn't give a guideline of whether the super call is going to be called before or after code so if you have more knowledge of this please let me know down in the comments just to showcase that this is going to be called directly after init state we're going to add a print call used giving it the text the change dependencies just keep in mind that did change dependencies can be called multiple times as it will be called directly after init state and then every time a dependency change now moving on to the update widget which is actually called whenever a configuration changes for that specific widget that could be things like passing variables down the constructor and those variables update a very common use case is when you pass a duration for a animation controller as you then need to change the duration of that controller now if we take a look at how we can implement the did update widget now of course if we check the documentation for it it says that we should make sure that the supercall is called first in this method so let's just move that up and we can do our implementation of it now first off we're just going to add a print to this in the beginning with the text of did update widget now we're going to actually simulate a call so we can actually see this one happening and the easiest way to do this is just passing a variable down to this widget so in the my app we're going to convert it to a stateful widget and we're going to create a method and a state variable now this method will be responsible for updating our state variable and in this case we want to be able to change the title when it's called so we'll call it update title and then implement set state and then define a new state variable called title we're going to assign it to something like flutter home page we're going to remove the final keyboard here and use set string as we're going to reassign it in set state now to make this simple we're going to reassign this title to new flutter home page now it's not much left we just have to pass this title variable down to the home page so we're going to do that and replace the initial title what we also have to do is actually pass this update title method down to the home page we can call it down below and to do this we're going to create a void callback and just name it to something like onpressed we pass that to the constructor making it possible to actually pass that method down so now scrolling up to my home page we can actually just pass the unpressed down now if we scroll down to the did update widget method to make this very obvious we can make a if call in here and inside here you actually have a reference to the current widget as well as the old widget before we actually got this call so what we can do is actually compare the new widgets title compared to the old widgets title and if they are different we're just going to make a print call so when we actually call the method this print call will be called as well as the widget's title will actually change we're going to scroll down to the build method so we can add a new button there the only reason for this button is used to call that method that we actually created and pass down here so now if we actually check this out we can see that if i refresh this page we have a init call and then we have a did change dependencies call and when the button is pressed we can see that the did update widget is called and then our print for the title has changed you can also see the updated title in the app bar now moving on to the deactivate method which is called when this object is removed from the tree now do not confuse this with the dispose method and dispose your variables in here as this can be called when for example moving the widget in the widget tree using a global key now taking a quick look at the deactivate method we implement it the same way as we did with the other ones now this is a bit different and the to-do is actually correct here the super call is actually going to be at the bottom of this deactivate method and as the other ones we're going to add a print call so we can visually see it and in the print call we'll use pass deactivate now i haven't needed to use this for over two years in flutter so if you have please let me know down in the comments now moving on to the last one which is dispose and this is called when the object is removed from the tree permanently and this is where you actually want to do all your disposed logic one example of when this is called is when you call the navigator.pushreplacement and actually replace the current widget with another one now if we take a look at implementing dispose method this is the same as with deactivate we actually have the super call at the bottom of this method we're going to add a print and this print will have a dispose now if you remember with the init state we actually created a animation controller and this is the most important part with this pose and it's that we have to dispose of those objects that could be things like animation controllers timers or streams and there is of course a lot more than those so if we call our animation controller we have the dispose method which we will call here if we don't call these things we could have memory leaks in our applications now to simulate a call for the dispose method we're going to add a button and this button is going to call the push replacement on the navigator and we're going to push a new page this one will just be called example route page which is used the most simple stateless widget you can think of now if we actually take a look at the results here we can see of course the init state and the change dependencies and if we click our did update widget we can see that those prints are called as well and then for the dispose when we push replacement we can see that the deactivate is called as well as the dispose and now we have made sure that that animation controller is actually disposed now you should have enough knowledge for those interview questions about life cycle methods if you like this kind of videos please let me know by subscribing to the channel like the video if you liked it dislike it if you disliked it and of course checking out the website a special thanks to my supporters on patreon and if you would like to support me there you can check out the link in the description other than that thank you for watching this video and make sure to check out one of these other videos coming up on the screen right now

Channel: Robert Brunhage

Views: 24,422

Keywords: Flutter, Flutter Life Cycle Methods, Flutter basics, flutter lifecycle, flutter lifecycle methods, flutter animation, flutter animation controller, flutter tutorial, Robert Brunhage, Flutter for beginners, Flutter interview, Flutter job, flutter interview questions, flutter lifecycle example, flutter initstate, flutter tutorial for beginners, Flutter basics tutorial, Flutter life cycle methods tutorial, flutter state methods, Flutter knowledge

Id: CjloInz3-I0

Length: 10min 2sec (602 seconds)

Published: Sat Nov 28 2020

Reddit Comments

[u/skinnydill]

I wish there were more blog posts about these Flutter topics instead of videos.

[u/JonythonCR]

Amazing info! Thanks!!

[u/[deleted]]

Your quality of videos and montage have improved a lot, I really like this new style :D