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';


void main() {
  runApp(const MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({super.key});


  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Your app's main widget tree
      home: AppLifecycleReactor(), // Wrap here
    );
  }
}


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


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


class _AppLifecycleReactorState extends State
    with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }


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


  AppLifecycleState _notification = AppLifecycleState.paused;


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


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Text(
      'Last notification: $_notification',
      style: const TextStyle(
        fontSize: 30,
        fontWeight: FontWeight.bold,
      ),
    ));
  }
}

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';

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

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State with WidgetsBindingObserver {
  String _lifecycleState = 'App is Started';

  @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:
        setState(() {
          _lifecycleState = 'App Resumed';
          // Perform actions on app resume (e.g., fetch data, update UI)
          print('App resumed!');
        });
        break;
      case AppLifecycleState.inactive:
      case AppLifecycleState.paused:
      case AppLifecycleState.detached:
        setState(() {
          _lifecycleState = 'App in Background';
        });
        break;
      case AppLifecycleState.hidden:
        // Add functionality for hidden state if needed
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lifecycle Example'),
      ),
      body: Center(
        child: Text(_lifecycleState),
      ),
    );
  }
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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 !!!

Flutter Agency 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.

Abhishek Dhanani

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.

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 comment

Your email address will not be published. Required fields are marked *


ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on