Flutter: App LifeCycle and Handling Orientation

hi guys welcome back to my youtube channel and this video we are going to talk about something which is very important and if you are already an app developer then you must have heard about the lifecycle so if you are an Android developer then you have heard about the activity lifecycle or the fragment lifecycle and sure an iOS developer then now you must have heard about the state changes for your of you so a similar thing we are going to talk about for flood or how can we handle that because this lifecycle changes can be you know can be important for you while developing your application so what is in lifecycle exactly so you must be thinking about that so let me just explain you in case if you don't know so similarly like before like we as a person have a life cycle or in our entire life like first to be born and then we become we have our childhood then we become young then we became adult and similarly so similarly or the app all the applications so have some kind of life cycle so let's talk about Android first of all so for Android this is you can see the diagram from this on developer.android.com this is the activity lifecycle where it has some stages for the activity and it is different for fragments so where we will not go in that much detail but you can see when your activity launches then it has to go through some steps like it is got it it goes through the oncreate method then on start' method and on resume method and then if you are active then then your activity is running but when you navigate to any other application then the on post method is called and if you remove the activity from the stack then on stop method is called then on destroy if your app totally destroys so this is how all a life cycle work similarly in if you see the life cycle for an iOS then there is a state changes so first of all it is not running then if it is in the foreground then it is inactive then it becomes active so it is like a pause then resumed and the background also it has a background and suspended so you can say there are a lot of methods available here will finish launching with options did finish launching with options so you can read about that you can go into more detail if you want to learn about it there is everything returned here in their respective websites so you can check it out what is inactive what is active what is background and similarly for Android also it is all returned but let's talk about now flooded how we can handle the lifecycle changes because we are not going to do it for Android and iOS separately we will do it just once because that is the advantage of Florida so here you can see we have a very simple app which is not doing anything and I have also deleted all the code before the boilerplate code which comes with the default installation so let's make an app which will have we will see all the lifecycle changes ok so let's say this is the my app let's make a stateful widget class and we can say this my app ok this is a normal thing which you have seen from many times we'll also talk about orientation changes because ah if for if you see in the life cycle this life cycle repeats or you can say recreates itself when you change the orientation of your device like from portrait to landscape so we'll also discuss that how it can we handle that so let's get back to our code so here we have a simple app which is not doing anything as of now so let's return here on material app first of all material app ok and it will have a home as let's say new scaffold and we can have a body here ok and now in this Center let's say we have a texts okay and let's say hello okay so this is our very basic app let's run it for Android so we will have a better understanding what we are going to do and now we will after or running this application for the first time you will see how to handle its life cycles so um it will take few seconds and also if you are making a game or something then then this Audient asian can also have an very impact on your application so you want to you know change the orientation and handle something on that orientation so orientation change so that's all so we will see and let's give it a little bit font size bigger font size let's say 22 okay so we have this hello as of now now off to UM capture the lifecycle state changes what you need to do you have to go to this my app state class where you have who you are extending this state and here you have to add a mixin which is the widget binding observer okay so after doing that you need to add observer whenever you're on this class initializes so we will call init state method and after this super dot in state we will say widget binding on the chit binding dot instance dot add observer and we will fast this Rashmi is the current one and then we will also remove this observer when we will dispose our class okay so we can say dispose and before calling super or dispose we will widget binding which is finding dot instance thought to remove observer should be there yeah and we will say this okay so that's what we need to do now we have to handle the life cycle changes okay so what we need to do we need to override another method here which is did change app lifecycle State so if you see here or this method gives gives us a state as a parameter and we just need that so lets us delete all this code and here we can call this sad state method and here we can capture the lifecycle state so let's make a variable here I have lifecycle state and we can say I apply cycle state let's make it a private one okay now here in the sad state change we will track that tossed it and store that in our variable app lifecycle state and let's also print this to see when our state changes okay so we can say life are my app my app state okay yeah and here we can say app lifecycle statement so this is what we will do and our app crashed so this is something which we need to do now here rather than printing the text let's print app lifecycle state dot to string okay so that's it guys let's run this application and let's see what happens so it will take some time so this is very simple if you see we need to just capture this state if you have the state then you can do whatever you want to do right if you want to some and save some data when the user goes from your app to another app then you can capture the post state and so as of now you can see it has printed null let's see our debug console where we will have some output as well and here you can see we don't have anything as of now so I'll just pause the activity by a switch by clicking on this this menu button in the bottom and here it should do something yeah so here you can see my AB state is at lifecycle state dot cost so app lifecycle state dot cost is the current state of my life cycle okay so if I will go back to my application which should be here so if I will click here now you can see this one it will be start from I slash flutter and now it is AB cycle state dot resumed and here also you can see it has printed apply cycle state dot resumed ok so this is let's just delete all of this ok and now let's do one thing let's just close this okay so let's just remove this from this stack if something happens and actually lost the connection to device so that is why it does not print anything so this is what we achieved now let's run it for iOS and see what changes it do ok so that it will take again few seconds to run this application in iOS and ok so basically this is what you need to understand and once you will have the value of this state you can do whatever you want to do so for iOS if you see it is printing null so let's go back to back the door let's minimize this screen and now you can see my app lifecycle dot inactive has been called and then the post one this post is just to you know you don't have to write inactive and post all together so this was this common for Android as well as for iOS I guess so if you see here then we have this on pause here but in flood or we have just post okay and here we have this inactive active so let's just click on that example again and now it is resumed you can see here my estate is inactive then resumed okay so you have to track this paused and resumed event and then you can do whatever you want to do like if you want to same save some data when user switches from your app to another app then you can save here in this sordid app change app lifecycle state method okay now let's stop this and let's go back to our and try it okay sorry let's go back to Android okay so we have our Android now and now let's see how we can you know perform something on when we change the orientation so let's run this application once to see what kind of for differences we see when we change the device orientation if it is affecting something or not okay so oh we're in the application on iOS I want it to run on Android as of now so let's run it on Android first of all and now these are the iOS and Android stuff would be kind of same so you don't have to worry about that so Clara team is actually making sure that you don't have to write a different code for a different operating system so that is something very good you don't have to so hey over here we have null let's switch to the home screen now let's go back and we have this app lifecycle state dot resume now if I change the orientation you can see nothing actually happened it is working very fine you have that same text which you were supposed to get and that is exactly what we are we want so if we talk about and you can see oh it is working properly nothing and no issue at all so if if you will do the same thing for in Android then you will lose this or textview this chat text will be changed because the app cycle is Ray created from oncreate method and then you have to handle that by saving that instance into a bundle so that is the stuff you need to do but a flutter takes care for us for changing the orientation but in case let's say I want to change the text color when I change the orientation then how can we do that right if you want to perform some changes with the app when user changes the orientation like you can see that in portrait mode there is a less space the width is small but the height is more but in landscape mode if we see then width is very big or you can say very large and the height is very less so that then obviously we can have some changes depending on the you can say depending on the orientation so let's see how we can do that so here in the home you have seen this new escape hold and then we have this in the body new sent or we can wrap this with a new widget you can go from anywhere where you want to change the orientation and you can wrap it or you can make a parent widget which is orientation breeder okay and let's just delete this code or cut this code as of now and the orientation builder takes a builder which takes a context and a orientation as a parameter and now here you could write the same code by calling return new center and all okay now you should have on this that's silly and this okay so now let's say I want to change the color when the orientation changes so I can say color and I will use this orientation variable dot orientation is equal to is equal to orientation dot portrait so if it is equal to equal to this then what I can say if it is portrayed then colors should be blue let's say okay otherwise the color should be red okay so that is what I am doing if you see again if orientation is blue or the portrait then color should be blue otherwise should be red so this is our orientation builder now you can see here on the right hand side that it all it already changes the text color to blue if I will change the orientation then you can see the color is now red let's change the orientation again and now it is blue again so this is how you can capture the orientation what-o on which orientation the user is using the app and you can do the necessary changes depending on that so this is all about life cycles and orientation so I hope you enjoyed this video if you did then do like the video and also make sure to subscribe to the channel also start the repository because I will upload this code to github which is already uploaded actually so you can see the link will be in the description so that's it guys I'll see in the next video bye bye take care and peace

Channel: Codepur

Views: 18,879

Keywords: flutter, flutter sdk, flutter tutorial, flutter tutorials, flutter life cycle, flutter lifecycle, flutter orientation, life cycle of app, android life cycle, ios life cycle, flutter state, flutter app state, flutter on pause, flutter on resume, flutter google, flutter app, what is flutter, flutter app lifecycle

Id: f9m_Wc4K5v0

Length: 16min 51sec (1011 seconds)

Published: Sat Apr 14 2018

Reddit Comments

[u/AlbertWalburn]

Watch yours video since i'm work at social media app development) Very useful! Thank you!

[u/[deleted]]

Really great work

[u/tutami]

Love your videos. I'd love more videos about dart. Finding resource about dart is almost impossible .

[u/sebe42]

I'm not doing any dev work, but find this lifecycle stuff very interesting. There is also the case when the operating system notifies the application of a memory pressure situation. https://docs.flutter.io/flutter/services/SystemChannels/system-constant.html