How do I check if the Flutter application is in the foreground or not?

Question

I don't want to show notification when the app is in foreground. How can I check live state of my app?

score 167 · Answer 1 · edited Mar 22 '22 at 22:54

167

In your State<...> class you need to implement WidgetsBindingObserver interface and listen for widget state changes. Something like this:

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  AppLifecycleState? _notification; 
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      _notification = state;
    });
  }

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

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

Then when you want to know what is the state, check

 _notification.index property. _notification == null => no state changes happened, 
0 - resumed, 
1 - inactive, 
2 - paused.

edited Mar 22 '22 at 22:54

Michal Šrůtek

1,647
16
17

answered Oct 19 '18 at 10:55

Valentina Konyukhova

4,464
2
24
33

2

Do I need to add WidgetsBindingObserver in all screen widget classes or only in a widget which is attached to the main class? – Ameer Nov 21 '19 at 09:13
1

You need to add with WidgetsBindingObserver to the widgets in which you want to do some reaction on AppLyfecycle events – Valentina Konyukhova Dec 19 '19 at 13:32
1

The example is working as expected but I also get a message when the app is resumed: E/BpSurfaceComposerClient(10905): Failed to transact (-1). What may be the cause ? – cwhisperer Mar 18 '20 at 09:51
2

You can always use enums with this as well (recommended) AppLifecycleState.resumed for example – Oliver Dixon Jul 17 '20 at 12:38
Can we asume that the initial state is resumed? – Diego Garcia Oct 08 '20 at 17:56
Valentine - if app has some permissions, user granted them, app is in background and user revoke granted permission then tries to use the app from background to foreground then app shows a white blank screen. This is the issue. Can we kill the background app if user tries to run app after revoking granted permission. Please suggest. Thanks. – Kamlesh Oct 29 '20 at 08:32
This doesn't work when the app is killed, for example in iOS – Saurabh Kumar Dec 16 '21 at 19:34
It's not working on Desktop just fyi – Oliver Dixon May 20 '22 at 14:41
1

Plz remove the question mark in `WidgetsBinding.instance?.removeObserver(this)` etc! For one thing, the instance can't be null, so it throws a warning, and for another thing, if it were to be null at some point, I doubt you could add or remove an observer to it! So it's quite misleading, really. – Karolina Hagegård Oct 28 '22 at 21:34

score 89 · Answer 2 · edited Feb 21 '21 at 13:36

89

To extend on @CopsOnRoad's answer, you can use a switch statement to make it nice and neat:

@override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.resumed:
        print("app in resumed");
        break;
      case AppLifecycleState.inactive:
        print("app in inactive");
        break;
      case AppLifecycleState.paused:
        print("app in paused");
        break;
      case AppLifecycleState.detached:
        print("app in detached");
        break;
    }
}

edited Feb 21 '21 at 13:36

Adrian Mole

49,934
160
51
83

answered May 28 '20 at 20:32

crushman

1,023
9
21

2

you forgot to close curly braces at the end. Please update the answer. Thanks. – Kamlesh Oct 29 '20 at 07:49
5

Don't copy paste this answer on its own - it complements the other answer, as it states -- this won't work unless you also have : ```@override initState() { super.initState(); WidgetsBinding.instance.addObserver(this); ... } @override void dispose() { WidgetsBinding.instance.removeObserver(this); super.dispose(); }``` – kris Jan 24 '21 at 00:35
StackOverflow shows accepted answers just below the question. The newer answers come before older answers. Always point to the answer of someone by adding @somebody answer. People will be miss guided by your statement "above answer" as now above is a newer answer which is approx 6 months newer than your answer, and I believe you meant by above answer is "Valentina Konyukhova" 's answer. – Rahmat Ali Feb 15 '21 at 16:50
How do you implement this at app level? Where would this code go? – who-aditya-nawandar Jun 22 '22 at 07:02

CopsOnRoad · Answer 3 · 2022-01-04T20:13:52.580

Simply create a bool variable which will keep track of all your background/foreground stuff.

Full code:

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  // This variable will tell you whether the application is in foreground or not. 
  bool _isInForeground = true;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
  }
  
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    _isInForeground = state == AppLifecycleState.resumed;
  }

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

  @override
  Widget build(BuildContext context) => Scaffold();
}

score 27 · Answer 4 · answered Apr 26 '21 at 20:13

Also there is a package named flutter_fgbg for this.

Example:

FGBGNotifier(
    onEvent: (event) {
        print(event); // FGBGType.foreground or FGBGType.background
    },
    child: ...,
)

Or:

subscription = FGBGEvents.stream.listen((event) {
    print(event); // FGBGType.foreground or FGBGType.background
});

// in dispose
subscription.cancel();

Why:

Flutter has WidgetsBindingObserver to get notified when app changes its state from active to inactive states and back. But it actually includes the state changes of the embedding Activity/ViewController as well. So if you have a plugin that opens a new activity/view controller(eg: image picker) or in iOS if you start a FaceID prompt then WidgetsBindingObserver will report as the app is inactive/resumed.

This plugin on the other hand reports the events only at app level. Since most apps need only background/foreground events this plugin is implemented with just those events. In iOS, plugin reports didEnterBackgroundNotification and willEnterForegroundNotification notifications and in Android, plugin reports these using androidx.lifecycle:lifecycle-process package.

Checkout example/ project to see the differences in action.

Example link.

This answer should have way more upvotes. The damn inactive/paused BS causes so many unexpected Bugs. This should be always as easy as this plugin provides it. The fact that you need a plugin for a simple problem like this is the reason alien civilizations still avoid earth. — 最白目, Dec 07 '21 at 09:44
How can I use this when I have multiple screen? The plugin doesn't get the state on the other screen, and even with the example app, I can't navigate to the next screen, I get this error Another exception was thrown: Navigator operation requested with a context that does not include a Navigator. — Dangdat, Jun 28 '22 at 23:20

Avinash · Answer 5 · 2022-06-14T06:38:15.803

class YourClassState extends State<YourClass> with WidgetsBindingObserver{


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


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

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.resumed:
        print("app in resumed");
        break;
      case AppLifecycleState.inactive:
        print("app in inactive");
        break;
      case AppLifecycleState.paused:
        print("app in paused");
        break;
      case AppLifecycleState.detached:
        print("app in detached");
        break;
    }
  }

}

score 10 · Answer 6 · answered Jan 04 '22 at 05:06

People have already posted the answer but this answer is for developers using Getx architecture. You will be able to use the same approach but instead of using it on our stateless widget use it in the controller page. This method helps you to manage foreground and background activities when using Getx state management architecture

class QuotesController extends GetxController  with WidgetsBindingObserver{

     @override
      void onInit() async{
        super.onInit();
        WidgetsBinding.instance?.addObserver(this);
     }
    
     @override
      void onClose() {
        WidgetsBinding.instance?.removeObserver(this);
      }
    
      @override
      void didChangeAppLifecycleState(AppLifecycleState state) async{
          switch(state){
    
            case AppLifecycleState.resumed:
              await player.play();
              break;
            case AppLifecycleState.inactive:
              await player.stop();
              break;
            case AppLifecycleState.paused:
              await player.stop();
              break;
            case AppLifecycleState.detached:
              await player.stop();
              // TODO: Handle this case.
              break;
          }
      }
    
    }

Gedeon Mutshipayi · Answer 7 · 2022-10-25T07:28:37.127

I was looking for an easy way to implement that solution and here is the one that works for me:

1. Create a LifecycleEventHandler Class

In this class add two callbacks as attributes, the suspendingCallBack will be invoked when the app goes to the background, and the resumeCallBack will be invoked when the app returns to the foreground.

class LifecycleEventHandler extends WidgetsBindingObserver {
  final AsyncCallback resumeCallBack;
  final AsyncCallback suspendingCallBack;

  LifecycleEventHandler({
    required this.resumeCallBack,
    required this.suspendingCallBack,
  });

  @override
  Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
    print('state >>>>>>>>>>>>>>>>>>>>>> : ${state}');
    switch (state) {
      case AppLifecycleState.resumed:
        if (resumeCallBack != null) {
          await resumeCallBack();
        }
        break;
      case AppLifecycleState.inactive:
      case AppLifecycleState.paused:
      case AppLifecycleState.detached:
        if (suspendingCallBack != null) {
          await suspendingCallBack();
        }
        break;
    }
  }
}

2. Listen to the State change.

In the main page of our app we can create a variable to save the lifecycle state, just when the app goes into the background we set the value to true, otherwise the value will be false.

class MainPageState extends State<MainPage> {

  bool isAppInactive = false; // if the app is Inactive do some thing

  @override
  initState(){
    super.initState();
    
    WidgetsBinding.instance.addObserver(
        LifecycleEventHandler(
            resumeCallBack: () async => setState(() {
            // The app is now resumed, so let's change the value to false
            setState(() {isAppInactive = false; });
              
        }), suspendingCallBack: () async {
            // The app is now inactive, so let's change the value to true
            setState(() {isAppInactive = true; });
        })
    );

  }

}

And then you can use that variable value to do what you want

if(isAppInactive){
  // then do some thing
}

无夜之星辰 · Answer 8 · 2022-07-26T10:03:34.020

3

You can use a global variable to save the state for easy to use.

For example:

1. Create global variable:

AppLifecycleState appLifecycleState = AppLifecycleState.detached;

2. AddObserver in your `AppState` class:

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

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

3. Save state:

@override
void didChangeAppLifecycleState(AppLifecycleState state) {
  appLifecycleState = state;
}

4. Now you can use it easily everywhere when you need:

if (appLifecycleState == AppLifecycleState.paused) {
  // in background
}

edited Jul 26 '22 at 10:03

answered Jun 10 '21 at 07:22

无夜之星辰

5,426
4
25
48

You must add 'WidgetsBinding.instance?.addObserver(this);' on the initState() for this code to work. For flutter < 2.0 remove the '?' – Tincho825 Jun 11 '21 at 15:07
As @Tincho825 describes - to use this approach additional implementation is required, example: https://stackoverflow.com/a/63641646 – Gene Bo Jul 25 '22 at 21:30

Łukasz Wiśniewski · Answer 9 · 2021-12-10T07:49:39.987

2

If you need it on app start, e.g. to differentiate between normal app launch and push notification, you can read directly from this:

WidgetsBinding.instance?.lifecycleState

It will be detached for push (that is when a push message is received in a callback) and resumed for normal app launch.

edited Dec 10 '21 at 07:49

answered Nov 01 '21 at 15:42

Łukasz Wiśniewski

467
6
13

Yuriy N. · Answer 10 · 2023-06-24T15:37:13.190

If you just need to know from your flutter_local_notifications method if the app is in the background, widgets, and states are not required at all.

This simple class will do the job:

import 'package:flutter/material.dart';

final lifecycleEventHandler = LifecycleEventHandler._();

class LifecycleEventHandler extends WidgetsBindingObserver {
  var inBackground = true;

  LifecycleEventHandler._();

  init() {
    WidgetsBinding.instance.addObserver(lifecycleEventHandler);
  }

  @override
  Future<void> didChangeAppLifecycleState(AppLifecycleState state) async {
    switch (state) {
      case AppLifecycleState.resumed:
        inBackground = false;
         print('in foreground');
        break;
      case AppLifecycleState.inactive:
      case AppLifecycleState.paused:
      case AppLifecycleState.detached:
        inBackground = true;
        print('in background');
        break;
    }
  }
}

In your main.dart:

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  lifecycleEventHandler.init();
  runApp(const MainApp());
}

Now, it works and properly prints in background/in foreground. Then from your notifications method just check inBackground variable.

Future _showNotificationWithDefaultSound(notifPlugin) async {
  if (!lifecycleEventHandler.inBackground){
    return;
  }
  //otherwise show a notification
  ...
}

Credits: link

If you want to update your widgets based on lifecycle events using Riverpod, check this answer.

Github

How do I check if the Flutter application is in the foreground or not?

10 Answers10

1. Create a LifecycleEventHandler Class

2. Listen to the State change.

1. Create global variable:

2. AddObserver in your `AppState` class:

3. Save state:

4. Now you can use it easily everywhere when you need:

Linked

How do I check if the Flutter application is in the foreground or not?

10 Answers10

1. Create a LifecycleEventHandler Class

2. Listen to the State change.

1. Create global variable:

2. AddObserver in your AppState class:

3. Save state:

4. Now you can use it easily everywhere when you need:

Linked

2. AddObserver in your `AppState` class: