How to manage App lifecycle in Flutter?

• General

Suppose a user wants to do something when they minimize their app. So, in this article, we will see how to manage App lifecycle in Flutter.

How to manage App lifecycle in Flutter?

There is a class called WidgetBindingObserver to monitor or manage the life cycle of your app. This class gives you access to an AppLifecycleState enumeration that contains various lifecycle events.

detached: The application will be hosted on the flutter but it will be isolated from all host views. This means that the app or engine will be initialized when the user-enabled view is not yet available.

inactive: The application is inactive and is not receiving user input. This means that the app is still in the foreground, but the user isn’t interacting with the app. This condition can usually occur when the app is open. This happens when the user is on the phone, answering a Touch ID request, and so on.

paused: This condition occurs when the application is not currently visible to the user, does not respond to user input, and is running in the background.

resumed:This condition occurs when the application is not currently visible to the user, does not respond to user input, and is running in the background.

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

So the first step is to use WidgetBindingObserver to extend the stateful class and add an observer to 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();
  }
}

As a result, we didn’t add any UI components to this code. We just added the scaffold(). We also extended the  _Homestate to include WidgetsBindingObserver. Later we added an observer to the current instance with initState () and removed it with dispos ().

Step 2: Override didChangeAppLifecycleState

@override
void didChangeAppLifecycleState(AppLifecycleState state) {
  super.didChangeAppLifecycleState(state);
  if (state == AppLifecycleState.inactive) {
    // Write your logic here
    print('App went to background');
  } else if (state == AppLifecycleState.resumed) {
    // Write your logic here
    print('App resumed to foreground');
  }
}

Now if you want to do something in a particular state, you can see the state using if-conditions. You can do the same for your entire app by simply changing the class in main.dart from stateless to stateful and doing the same. thing.

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 platform that is dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter 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.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.