What is onResume() and onPause() For Widgets on Flutter ??

• General

One of the most confusing ideas transitioning from Android and/or iOS is to understand how Flutter Manage its Lifecycle. So in this article, we will go through What is onResume() and onPause() For Widgets on Flutter.

What is onResume() and onPause() For Widgets on Flutter??

The most common case where you’d want to do this is if you have an animation running and you don’t want to consume resources in the background. In that case, you should extend your State with TickerProviderStateMixin and use your State as the vsync argument for the AnimationController. Flutter will take care of only calling the animation controller’s listeners when your State is visible.

If you want the States that live in your PageRoute to be disposed of when the PageRoute is obscured by other content, you can pass a maintained state argument of false to your PageRoute constructor. If you do this, your State will reset itself (and its children). When it is hidden and will have to re-construct itself. It will re-construct itself using initState() using the properties passed in as constructor arguments to its widget.

You can use a model or controller class, or PageStorage, to hold the user’s progress information if you don’t want a complete reset.

Here is a sample app that demonstrates these concepts.

Consider a code snippet like the below:

import 'package:flutter/material.dart';
void main() {
  runApp(new MaterialApp(
    onGenerateRoute: (RouteSettings settings) {
      if (settings.name == '/') {
        return new MaterialPageRoute(
          settings: settings,
          builder: (_) => new MyApp(),
          maintainState: false,
        );
      }
      return null;
    }
  ));
}
class MyApp extends StatefulWidget {
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State with TickerProviderStateMixin {
  AnimationController? _controller;

  @override
  void initState() {
    print("initState was called");
    _controller = new AnimationController(vsync: this)
      ..repeat(min: 0.0, max: 1.0, period: const Duration(seconds: 1))
      ..addListener(() {
        print('animation value ${_controller?.value}');
      });
    super.initState();
  }

  @override
  void dispose() {
    print("dispose was called");
    _controller?.dispose();
    super.dispose();
  }

  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar:  AppBar(
        title:  Text('home screen')
      ),
      body:  Center(
        child:  ElevatedButton(
          onPressed: () {
            setState(() {
              _counter++;
            });
          },
          child:  Text('Button pressed $_counter times'),
        ),
      ),
      floatingActionButton:  FloatingActionButton(
        child:  Icon(Icons.remove_red_eye),
        onPressed: () {
          Navigator.push(context,  MaterialPageRoute(
            builder: (BuildContext context) {
              return  MySecondPage(counter: _counter);
            },
          ));
        },
      ),
    );
  }
}

class MySecondPage extends StatelessWidget {
  MySecondPage({ this.counter =0 });

  final int counter;

  Widget build(BuildContext context) {
    return  Scaffold(
      appBar:  AppBar(
        title:  Text('Certificate of achievement'),
      ),
      body:  Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
           Icon(Icons.developer_mode, size: 200.0),
           Text(
            'Congrats, you clicked $counter times.',
           
            textAlign: TextAlign.center,
          ),
           Text(
            'All your progress has now been lost.',
           
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

There is an abstract class caller WidgetsBindingObserver

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

there is the “state”. Like this:

switch(state) {
  case AppLifecycleState.resumed:
    // Handle this case
    break;
  case AppLifecycleState.inactive:
    // Handle this case
    break;
  case AppLifecycleState.paused:
    // Handle this case
    break;
  case AppLifecycleState.suspending:
    // Handle this case
    break;
}

The Navigator.push() is actually a Future. it means it has then() callback function. So the then() will be called after you call Navigator.pop() from the second screen. So now, you can send some data from the second screen and access the data on the first screen.

Consider a code snippet like the below:

//from Screen A
Navigator.of(context).push(MaterialPageRoute(builder:(context)=>B()))
.then((value)=>{ refresh() });

//in Screen B with data
Navigator.pop(context,[1]);

//or without data
Navigator.pop(context);

So screen A will call refresh() on the resume

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So in this article, we have been through What is onResume() and onPause() For Widgets on Flutter.

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.