Flutter - Handling Application Lifecycle | Flutter Tutorial

[Music] hey hello friends and welcome to retro portal studio and in this video we're going to be taking a look at detecting different application states in your flutter app in this particular app you can see that there is an ongoing timer when i minimize the app the timer pauses it's currently paused at 13 and when i come back to the app the timer resumes from where it stopped this type of behavior is quite important to implement in most modern day apps so without further ado let's take a look at how we can implement this in our flutter apps okay so right now i'm in a simple flutter app in which i have this home screen which is a stateful widget and in the state of this widget i have this timer and a count and in the init state function i'm initializing this timer with the timer.periodic constructor and i'm rerunning this timer every second so the count is incremented and the state is refreshed and the dispose function of this widget i'm cancelling out the timer now you can see the timer running in the app and when i minimize the app the timer is still running in the background and it's still refreshing the state when i come back to the app the timer is continuously running without any stop so let's add logic to detect application states for now i'll minimize the emulator and the first thing that i'll do is i'll add a mix-in to home screen state and to add the mix-in i'm going to be using the width keyword and the mixing that we need to add is called widget binding observer with this with keyword we have the choice to implement only certain methods of this widget binding observer that we need in this home screen state and the only method coming from widget binding observer that we need to concern ourselves with is called did change app lifecycle state we're going to be overriding this function and in the argument of this function we get this app lifecycle state there are four possible values for this enum so let's take a look at those so a particular app screen can go into these four possible states that is resumed paused inactive and detached in the resume state it is in the foreground it is visible to the user and it's responding to the user input in the paused state the application is minimized it is not visible to the user so basically it does not respond and the application is in background the inactive state is a bit complex the application is likely in foreground but it's not currently responding to the user input we'll be taking a look at this inactive state in a bit more depth and the detached state is basically when the screen is not visible to the user whether it's being created or destroyed on an event like navigation.pop so the three main states that you need to concern yourselves with is this resumed paused and inactive state so let's take a look at these in the app itself back in the app i have added a bit of implementation in this did change app lifecycle state method we're checking the state with this basic if else statement and in each of the block we're printing the type of state but this function will not work out of the box we need to do a bit of setup so i'll go up in the init state function and before initializing the timer i need to use the instance of widget binding using widget binding dot instance and from this i need to add the observer and because we have added this widget binding observer as a mixin we can simply pass this for the observer in the same way for the on dispose function after the timer is cancelled i need to write widget binding dot instance and with this instance i need to remove the observer and for this we also pass in this and with the simple setup this function of did change app lifecycle will run smoothly i'll close the app and run the app once again at this point the timer is running i'll minimize the app and you can see that the app goes into the inactive state and soon into the paused state now if i go back and resume the app the application comes into the resumed state and the timer is running so let's set a bit of logic to pause the timer when the app is minimized and to resume the timer when the app is resumed again i'll minimize the emulator for now and come back to the did change app lifecycle state method the states we need to concern ourselves with are these resumed inactive and paused now to control the updation of counts with the timer i need to go up in the state and here i'll create a new boolean called active and set its initial value to true and now what i'll do is that in the timer function i'll take this set state and i'll use an if statement and if the active is true only in this case i'll use the set state function so basically if this active is true only in that case the count will be incremented and the state will be updated with this what we can simply do is we can go to the did change app lifecycle state method and if the state is resumed we can set the active to true in the inactive state we can set the active to false and we'll do the same in the paused state now i'll close the app and run the app once again you can see that the timer is running i'll minimize the app and the timer was at four the app goes into the inactive state and soon into the paused state i'll wait for some time and go back to the app and the timer resumes from four so we have successfully implemented that the timer stops when the app goes into the pause state and resumes when the app comes into the foreground so now that you have the knowledge to modify the app behavior based on different states let's take a look at when the application goes into the inactive state for this i'll take the application to the split screen view for this i'll click on the application icon and here we have the option to split screen you can see that the app is an inactive state because the app is running and it is visible to the user but the user cannot interact with the app now what i'll do is i'll open the drawer and here i'll select another app and once the second app runs the first app resumes and you can see that the application state is now resumed and if i remove the split screen and open up chrome you can see that the app now goes into the inactive and then into the paused state so this is basically how the inactive state works i'll come back to the app and the timer will resume from where it stopped one thing i'd like to suggest to you is to take a look at this app lifecycle state enum on the flutter.dev website the link for this will be in the description below this page explains to you in detail how different states work for example in the inactive state it explains to you how different events on ios and android can lead for this state to happen there's a lot more detail on this page and you can also take a look at this widget binding observer page for the reference of the code that i just showed you there's a lot more to learn in this so make sure to check these pages out with this you now know how different states of application work and how you can detect them and modify the behavior of your flutter app i hope you found this tutorial useful and if you do please make sure to hit the like and subscribe button and also consider following me on twitter for future updates see you next time peace you

Channel: RetroPortal Studio

Views: 22,320

Keywords: flutter, flutter tutorial, flutter lifecycle, flutter lifecycle methods, flutter widget binding observer, flutter tutorial for beginners, flutter basics, flutter timer, flutter app development, flutter basics tutorial, flutter app lifecycle, lifecycle methods in flutter, widget binding flutter, widget binding observer flutter, lifecycle flutter, stateful widget lifecycle flutter, flutter widgets

Id: a0RG0sxfSjk

Length: 8min 1sec (481 seconds)

Published: Fri Feb 26 2021