As a mobile app developer, you will be required to use AppLifeCycleState at some point. With the usage of Flutter, I could not find many useful articles online regarding AppLifeCycleState management in Flutter. So I thought why not write an article about it.
Just before the thought came for me to write this article, I was developing an app called Jinda – Bhutan Quiz App. Which should have been published by the time you are reading this article. In my app, I had implement music in the app game-play. When I send the app to background the music was still playing, even when I lock my phone.
Here is the tutorial!!
AppLifeCycleState Management
Your mobile app can be in the various state during its usage. This state is known as the app life cycle state. We can trigger different method as per the state that your app is in.
These state notifications are sent by your device’s operating system. But you cannot expect always to receive notifications. In some rare circumstances, it does not receive these state notifications. For instance, if the user removed the battery from the device then you will not be receiving any notifications. I assume this will be the rare case as now most smartphones come with a non-removable battery.
According to official Flutter Documentation, there are FIVE different constants mentioned. Let us understand it one by one:
detached
In this state the application is still hosted on a flutter engine but is detached from any host views.
This means that the engine is running without a view. It can either be in the progress of attaching a view when the engine was first initialized, or after the view being destroyed due to a Navigator pop method.
inactive
The application is in an inactive state and is not receiving user input.
This state corresponds to an app or the Flutter host view running in the foreground inactive state. Apps transition to this state when in a phone call, responding to a TouchID request, when entering the app switcher or the control centre, or when the UIViewController hosting the Flutter app is transitioning for iOS devices. On Android, this corresponds to an app or the Flutter host view running in the foreground inactive state. Apps transition to this state when another activity is focused, such as a split-screen app, a phone call, a picture-in-picture app, a system dialogue, or another window. Apps in this state should assume that they may be paused at any time.
paused
During paused state the application is not currently visible to the user, not responding to user input, and running in the background.
resumed
The application is visible and responding to user input.
values
A constant List of the values in this enum, in order of their declaration.
Flutter WidgetsBindingObserver Class
WidgetsBindingObserver is the interface for classes that register with the Widgets layer binding.
This class can be extended directly, to get default behaviours for all of the handlers, or can be used with the implements keyword, in which case all the handlers must be implemented (and the analyzer will list those that have been omitted).
You will be using following two method from this class:
WidgetsBinding.addObserver
Registers the given object as a binding observer. Binding observers are notified when various application events occur, for example when the system locale changes. Generally, one widget in the widget tree registers itself as a binding observer and converts the system state into inherited widgets.
WidgetsBinding.removeObserver
Un-registers the given observer. This should be used sparingly as it is relatively expensive (O(N) in the number of registered observers).
Adding AppLifeCycleState to Flutter Code
Enough of theory lets see how we can implement it in our code.
First You need to extend your class with the WidgetsBindingObserver.
Secondly, you need to add the method addObserver to initState and also add removeObserver to dispose.
Finally, we will implement function didChangeAppLifecycleState and in this function, we will write our code to handle different state.
You can find the complete code for the Class as below.
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
AppLifecycleState _notification;
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
setState(() {
if (state == AppLifecycleState.paused) {
// Your Code goes here
} else if (state == AppLifecycleState.inactive) {
// Your Code goes here
} else {
// Your Code goes here
}
});
}
@override
Widget build(BuildContext context) {
return Text('Last notification: $_notification');
}
}
That is all folks!
In this tutorial, we have learned AppLifeCycleState Management Implementation of Mobile App with Flutter. I have also explained the theory portion, so it would help you learn better.
With the final code, you will learn how to implement it in your Flutter code. To check my other tutorials regarding flutter click here.
If you faced any problem during implementation or know a better way, let me know in the comment section.
The post AppLifeCycleState Management Implementation in Flutter appeared first on InstaCodeBlog.
Top comments (1)
Not working for me!