How to Update Widgets On Resume In Flutter ?

· 4 min read
How to Update Widgets On Resume In Flutter
How to Update Widgets On Resume In Flutter

Earlier We have been through Flutter Life Cycle. It has multiple states in which users can perform operations as per the end-user requirement. Sometimes it may happen that the user wants to update Update Widgets On Resume. So in this article, we will learn about How to Update Widgets On Resume In Flutter?

How to Update Widgets On Resume In Flutter?

Users can listen to the lifecycle event using the below code snippet.

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

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

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

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

User can also give a try to code snippet as below:

import 'package:flutter/services.dart';

SystemChannels.lifecycle.setMessageHandler((msg){
  debugPrint('SystemChannels> $msg');
  if(msg==AppLifecycleState.resumed.toString())setState((){});
});

A simple way to do this is by using the below code snippet.

First import package like below:

import 'package:flutter/services.dart';
handleAppLifecycleState() {
    AppLifecycleState _lastLifecyleState;
    SystemChannels.lifecycle.setMessageHandler((msg) {

     print('SystemChannels> $msg');

        switch (msg) {
          case "AppLifecycleState.paused":
            _lastLifecyleState = AppLifecycleState.paused;
            break;
          case "AppLifecycleState.inactive":
            _lastLifecyleState = AppLifecycleState.inactive;
            break;
          case "AppLifecycleState.resumed":
            _lastLifecyleState = AppLifecycleState.resumed;
            break;
          case "AppLifecycleState.suspending":
            _lastLifecyleState = AppLifecycleState.suspending;
            break;
          default:
        }
    });
  }

OR User can also try the below way.

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

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

    class _AppLifecycleReactorState extends State<AppLifecycleReactor> 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(() { _notification = state; });
      }

      @override
      Widget build(BuildContext context) {
        return Text('Last notification: $_notification');
      }
    }

There are three methods for LifeCycle Solution.

Now we will understand the main difference between WidgetsBindingObserver and SystemChannels.lifecycle is that WidgetsBindingObserver has more capable If you have a bunch of widgets that need to listen to LifeCycle. SystemChannels is a more low layer and used by WidgetsBindingObserver.

After several testing, If you use SystemChannels after runApp, and home widget mixin with WidgetsBindingObserver, the home widget would be failed, because SystemChannels.lifecycle.setMessageHandler override the home’s method.

So If you want to use a global, Single method, go for SystemChannels.lifecycle, others for WidgetsBindingObserver.

Users can perform the desire operations using the help of the below code snippet.

import 'package:flutter/material.dart';

abstract class LifecycleWatcherState<T extends StatefulWidget> extends State<T>
    with WidgetsBindingObserver {
  @override
  Widget build(BuildContext context) {
    return null;
  }

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

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

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.resumed:
        onResumed();
        break;
      case AppLifecycleState.inactive:
        onPaused();
        break;
      case AppLifecycleState.paused:
        onInactive();
        break;
      case AppLifecycleState.detached:
        onDetached();
        break;
    }
  }

  void onResumed();
  void onPaused();
  void onInactive();
  void onDetached();
}

Conclusion:

In this article, We have been through How to Update Widgets On Resume In Flutter?

Drop us your valuable feedback to serve you better.

Thanks for Reading !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

1 comment

  1. What i realize using WidgetsBindingObserver is that the onResume, onPause behaviour is working here globally for the entire app in flutter, and not pagewise like we see in Android. Can i get native android like behaviour, that is pagewise onResume event listening? Please help me, i need to know it as soon as possible as i am working in an important project right now.

Leave a Reply