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.
If you faced any problem during implementation
or know a better way, let me know in the comment section.