How to manage App lifecycle in Flutter?

· 4 min read
How to manage App lifecycle in Flutter?

Let’s say you want to do something when the user minimizes your app. So, in this article, we will see how to manage App lifecycle in Flutter.

How to manage App lifecycle in Flutter?

So, to observe or manage the Lifecycle of our app, we have a class called WidgetBindingObserver. In this class, we have access to an enum AppLifecycleState that has various lifecycle events. Let’s see those events one by one:

detached: The application is still hosted on a flutter engine but is detached from any host views. This means that the app or the engine is initializing while the view is not yet available for the user to interact with.

inactive: The application is in an inactive state and is not receiving user input. This means that the app is still in the foreground but the user is not interacting with your app. Usually, when the app is open you can encounter this state. It happens when the user is in a phone call, responding to a TouchID request, etc.

paused: This state is encountered when the application is not currently visible to the user, not responding to user input, and running in the background.

resumed: This state is encountered when the application is again in the foreground and is visible and responding to user input.

Let’s now see how you can listen to the AppLifecycle to check the state!

Step1: Add WidgetsBindingObserver to your class and add the observer.

So,the first step is to extend our stateful class with WidgetBindingObserver & add the observer in initState(). We also need to remove the observer from the screen in dispose() method. Here’s a code snippet:

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
  }

  @override
    Widget build(BuildContext context) {
    return const Scaffold();
  }

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

So in this code, we have not added any UI components. We have just added the Scaffold(). We have extended our _Homestate with WidgetsBindingObserver. Then we added the observer of the current instance in initState() and removed it in dispose().

Step 2: Override didChangeAppLifecycleState

@override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    print('State: $state');
  }

Now, if you wish to do something in a particular state, you can check which state it is using if conditions: You can do the same for the entire app by simply changing the class in main.dart from Stateless to Stateful and doing the same.

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen how to manage App lifecycle in Flutter.  Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget GuideFlutter Projects, Code libs and etc.

We are a top Flutter App Development company dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply