How to Update Widgets On Resume In Flutter?

• General

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.

• WidgetsBindingObserver
• SystemChannels.lifecycle
• Flutter-android-lifecycle-plugin

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 Guide, Flutter Projects, Code libs and etc.

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.