onResume() and onPause() for widgets in Flutter

#flutter #dart

Hi guys, Today we are going to take a look at widget states in Flutter. Coming from Android we are familiar with app states (activity state) like onCreate, onResume and onPause, lets see the equivalent to these functions in Flutter.

Lets build an Scenario

We are building an Bank app that should request the user’s password each time the app is opened. In this case we can start by thinking where we should put the code that show a dialog requesting the password.

WidgetsBindingObserver

This class lets us receive notifications for many system and app changes. For example here is few functions available in this class:

didPopRoute()On Android, this is called when the user press the back button.
didChangeLocales(…)
Called when the sytem notify the app that the user changed system’s language settings.
didChangeAppLifecycleState(…)
This one is called when the system puts the app in background/foreground.

We have two options when using it: extends, to get default behavior for all app/system changes or implements where we must implement all the handles.

Setting it up

Now that we know the WidgetsBindingObserver lets use it for our use case: request user’s password everytime the app is resumed.

Extend MyHomePage state class:

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {...}

2. Add the observer to the current WidgetsBinding instance:

To receive changes notifications we must register our observer, also we should unregister the observer in dispose() fuction to release resources reserved by our observer

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addObserver(this);
}

Releasing resources…

@override
void dispose() {
  WidgetsBinding.instance.removeObserver(this);
  super.dispose();
}

3. Listen for when the app enter in background or foreground state.
In this step all we need to do it to check wich state we received from the system and then react to those changes.

@override
void didChangeAppLifecycleState(AppLifecycleState state) {
  if(state == AppLifecycleState.resumed){
    _showPasswordDialog();
  }
}

This way every time the user navigate away from our app and then come back, the _showPasswordDialog() will be called.

We can also check wether the user is leaving our app for example:

@override
void didChangeAppLifecycleState(AppLifecycleState state) {
  if(state == AppLifecycleState.resumed){
    // user returned to our app
  }else if(state == AppLifecycleState.inactive){
    // app is inactive
  }else if(state == AppLifecycleState.paused){
    // user is about quit our app temporally
  }else if(state == AppLifecycleState.suspending){
    // app suspended (not used in iOS)
  }
}