Flutter App life Cycle Like a Boss - Learn How to Reuse the Logic

this circle of life is all in the app lifecycle one important note is that apple lifecycle is not the same as widget lifecycle if you want to find out more about widget lifecycle check out the previous video we have four different states we need to know about that being detached inactive paused and also resumed we'll start off with the detached state this happens when application is still hosted on the flutter engine but is detached from any host views this could for example happen after a destroyed view due to navigator pop the second one being the inactive state when the application is in this state it does not reserve any user input this one happens in different scenarios for android and ios but one example where both platforms will have this state is when you take a phone call the third state being paused is when the application is not visible at all to the user one example is when you press the home button on your phone and the application minimizes on pause will be called and we also have the last state being the resumed state and this is when the application is visible and responding to user input and this will be called when you navigate back into the app if you like this kind of videos please let me know by subscribing to the channel and let's dive into the code here i have the start of a new project as always we just start by removing all of the comments and what we will do is use to remove all of the code in the home page we don't care about any ui kind of things so we'll just make it return a scaffold and then of course removing the state and the method that will leave us with a bare bone stateful widget and on this state we can start by adding our widgets binding observer this will let us interact with a bunch of different methods regarding different scenarios of this app here we can see in the documentation if we use the with keyword or the mixing we will be able to decide which methods we want to implement but if we use the implementation keyword all of those methods will be enforced so if we use try that we can see that we need to override 10 different methods and there are a bunch of different ones things like change accessibility features change app lifecycle state and that's the one we are most interested in we also have d change locales d change metrics d chains platform brightness and so on as we are only interested in one of those as of now we'll start by just removing all of those method and use the with keyword instead now we can override ourselves and we'll override the did change app lifecycle state after we have done that if we go back up to the widgets binding observer and check the documentation we can see that we also need the widgets binding add-on server and also the widgets binding remove observer this will be called in init state and dispose respectively and will you start by adding it in init state so by overriding the init state method we can access the widgets binding instance and on this instance we have a method called add observer here we can use to pass this as we are implementing the widgets binding observer now we will do pretty much the same thing in the dispose so we will just override a dispose and we will almost do the same just writing widgets binding dot instance and then here we can call a remove observer and this will pretty much be the same we just passed this as a parameter as well now if we look at our d change app lifecycle state we'll start by just adding a print statement in a print statement i will add app lifecycle state and used adding a colon for the state so now if we use start up the application we can see that it's just a white screen because we don't have any kind of ui now if we press the home button we can see that first the inactive state is printed and then the pause is printed now if we go back into the application we are then going to see the resumed being printed now this can be sometimes quite hard to see so we can use to filter out what we added in our print statement so we only see all of the prints with the app lifecycle state now doing the scenario again where we just go back and in again we can see that all of these three are called so now if we go back into the code in the d change the app lifecycle state here we can do for example a if statement and checking if the state is equal to a specific state and then of course depending on that state do the actual code that you want to do for example on post you could have that you would save a timer or a date and then when you get back to resumed you could calculate the time that was actually spent in the background to reduce the timer's time now one thing you have to be aware of right now is that we only listen to this lifecycle in this specific homepage now to illustrate this a bit more we'll create a new widget and this will be just another page and as we don't really care about ui right now we'll just have a empty scaffold so by just going up to the home page and adding a centered button and when we press this button we can simply do a push replacement and just show that other page we created so now if we go ahead and run the application we can see that we have a button where it just says route and as this is the home page we can see that the lifecycle is actually working here but if we go to the other page and use navigate out and in we can see that we don't get any printing in the console and that is because this new page we have routed to which is pushed replaced doesn't actually implement the widgets binding observer now sometimes you don't actually want this behavior maybe you always want to react to this different state and it doesn't care about the different widgets to accomplish this we can create a new widget and this widget will be wrapped around the material app so we'll just copy all of the code in my home page and then navigating to a new file we will call this file something like app lifecycle manager and inside this file we'll just paste everything of the home page we'll start by renaming it to something like app lifecycle manager and then of course adding all of the necessary imports now after we have done that we'll just change the build method some because we actually don't want it to return its own scaffold we'll remove all of that and then in the top we will add a new parameter for the constructor first off we remove the title and then we create a new final field for a widget which we will use called child now we can just add the child to the constructor and then in the return statement you would use write widget.child and that's actually for now they're all we have to do in this app lifecycle manager so if we navigate back to the main.dart we can start by wrapping the material app with this new created widget so if we just type the app lifecycle manager and of course fixing the imports to user relative imports we then have to also scroll down to my home page and just remove all of the code relating to the widgets binding observer that way we don't duplicate all of the printing and we know that it's from the app lifecycle manager and not the actual home page so now if we used to rerun the application shake the console and then of course navigating out and back in we can see all of our prints and this also works if we navigate to our new page so now if you want to handle different scenarios for the whole application you can do that in there instead that way you're not bound to having it in specific pages or screens or whatever you want to call it but actually have a specific widget for that instead and with that we have actually implemented all we need to do for handling the app lifecycle for a flutter application if you like this kind of videos make sure to subscribe to the channel like the video if you liked it dislike it if you disliked it i'm working on a course so it would be awesome if you would sign up for a newsletter when a course is released i will of course pick a couple of people to actually win the course other than that if you want to support me you can check out patreon down in the description it really helps and while you're at it why not check out other videos coming up on the screen right now i really recommend the flutter widgets life cycle so if you haven't seen it make sure to check it out and i will see you in the next one

Channel: Robert Brunhage

Views: 11,773

Keywords: Flutter, Flutter basics, flutter lifecycle, flutter lifecycle methods, flutter animation, flutter tutorial, Robert Brunhage, Flutter for beginners, Flutter interview, flutter interview questions, flutter lifecycle example, flutter initstate, flutter tutorial for beginners, Flutter basics tutorial, flutter state methods, Flutter knowledge, Flutter app Lifecycle, flutter background, flutter handle background, flutter reusability, flutter reuse code

Id: xviNPcy8DD4

Length: 9min 30sec (570 seconds)

Published: Sat Dec 12 2020