[shutter] shutter application life cycle (foreground state resumed | background state paused | inactive | component separation state detached)

One 、Flutter Application life cycle

---

Application life cycle :

• resumed : Application enters the front desk ;
• paused : The app goes into the background ;
• inactive : App goes inactive ;
• detached : Applications are running but separate from components ;

Flutter Apply lifecycle state enumeration : There are four lifecycle states in this enumeration , The usage of each state is detailed in the source code comments ;

/// States that an application can be in.////// The values below describe notifications from the operating system./// Applications should not expect to always receive all possible/// notifications. For example, if the users pulls out the battery from the/// device, no notification will be sent before the application is suddenly/// terminated, along with the rest of the operating system.////// See also:////// * [WidgetsBindingObserver], for a mechanism to observe the lifecycle state/// from the widgets layer.enum AppLifecycleState { 
      /// The application is visible and responding to user input.  resumed,  /// The application is in an inactive state and is not receiving user input.  ///  /// On iOS, this state corresponds to an app or the Flutter host view running  /// in the foreground inactive state. Apps transition to this state when in  /// a phone call, responding to a TouchID request, when entering the app  /// switcher or the control center, or when the UIViewController hosting the  /// Flutter app is transitioning.  ///  /// On Android, this corresponds to an app or the Flutter host view running  /// in the foreground inactive state. Apps transition to this state when  /// another activity is focused, such as a split-screen app, a phone call,  /// a picture-in-picture app, a system dialog, or another window.  ///  /// Apps in this state should assume that they may be [paused] at any time.  inactive,  /// The application is not currently visible to the user, not responding to  /// user input, and running in the background.  ///  /// When the application is in this state, the engine will not call the  /// [Window.onBeginFrame] and [Window.onDrawFrame] callbacks.  paused,  /// The application is still hosted on a flutter engine but is detached from  /// any host views.  ///  /// When the application is in this state, the engine is running without  /// a view. It can either be in the progress of attaching a view when engine  /// was first initializes, or after the view being destroyed due to a Navigator  /// pop.  detached,}

Two 、 monitor Flutter Application life cycle

---

monitor Flutter Application life cycle , Need on page StatefulWidget Of initState Register in the page lifecycle function WidgetsBindingObserver The observer ;

  @override  void initState() { 
        super.initState();    ///  If you want to monitor the application lifecycle  ,  First bind the observer  ,    ///  When the binding is complete  ,  If the application lifecycle changes  ,    ///  It's going to come back  didChangeAppLifecycleState  Method  ;    WidgetsBinding.instance.addObserver(this);  }

registered WidgetsBindingObserver After the observer , When applying lifecycle changes , It's going to come back WidgetsBindingObserver Class didChangeAppLifecycleState Method , Its AppLifecycleState state The parameter is the current application lifecycle state ;

  ///  When the application lifecycle changes  ,  The method is called back   @override  void didChangeAppLifecycleState(AppLifecycleState state) { 
        super.didChangeAppLifecycleState(state);    print(" Current application lifecycle state  : ${state}");    if(state == AppLifecycleState.paused){ 
          print(" The app goes into the background  paused");    }else if(state == AppLifecycleState.resumed){ 
          print(" Application enters the front desk  resumed");    }else if(state == AppLifecycleState.inactive){ 
          //  App goes inactive  ,  Tathagata made a phone call  ,  The phone application enters the front desk       //  This application enters this state       print(" App goes inactive  inactive");    }else if(state == AppLifecycleState.detached){ 
          //  Applications are still  Flutter  Running on the engine  ,  But with the host  View  Component separation       print(" The application enters  detached  state  detached");    }  }

stay StatefulWidget The page needs to be removed when it is destroyed WidgetsBindingObserver The observer ;

  ///  Remove the observer registered in the component   @override  void dispose() { 
        super.dispose();    WidgetsBinding.instance.removeObserver(this);  }

3、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';class AppLifeCyclePage extends StatefulWidget { 
      @override  _AppLifeCyclePageState createState() => _AppLifeCyclePageState();}class _AppLifeCyclePageState extends State<AppLifeCyclePage> with WidgetsBindingObserver { 
      @override  void initState() { 
        super.initState();    ///  If you want to monitor the application lifecycle  ,  First bind the observer  ,    ///  When the binding is complete  ,  If the application lifecycle changes  ,    ///  It's going to come back  didChangeAppLifecycleState  Method  ;    WidgetsBinding.instance.addObserver(this);  }  @override  Widget build(BuildContext context) { 
        return Scaffold(      appBar: AppBar(        //  title         title: Text(" Application life cycle "),        //  Return button         leading: BackButton(),      ),      body: Container(        //  Center setting         alignment: Alignment.center,        child: Text(" Application life cycle "),      ),    );  }  ///  Remove the observer registered in the component   @override  void dispose() { 
        super.dispose();    WidgetsBinding.instance.removeObserver(this);  }  ///  When the application lifecycle changes  ,  The method is called back   @override  void didChangeAppLifecycleState(AppLifecycleState state) { 
        super.didChangeAppLifecycleState(state);    print(" Current application lifecycle state  : ${state}");    if(state == AppLifecycleState.paused){ 
          print(" The app goes into the background  paused");    }else if(state == AppLifecycleState.resumed){ 
          print(" Application enters the front desk  resumed");    }else if(state == AppLifecycleState.inactive){ 
          //  App goes inactive  ,  Tathagata made a phone call  ,  The phone application enters the front desk       //  This application enters this state       print(" App goes inactive  inactive");    }else if(state == AppLifecycleState.detached){ 
          //  Applications are still  Flutter  Running on the engine  ,  But with the host  View  Component separation       print(" The application enters  detached  state  detached");    }  }}

Running effect :

Enter interface : After entering the interface , Because I haven't registered WidgetsBindingObserver , So do not print the log , After the interface is loaded , All kinds of operations ( If pressed Home key , Press the back button , Press the menu key ) Only when the log is printed ;

Press the menu key :

• Interface state :

• Print log :

I/flutter (30370):  Current application lifecycle state  : AppLifecycleState.inactiveI/flutter (30370):  App goes inactive  inactiveD/FlutterView(30370): Detaching from a FlutterEngine: io.flutter.embedding.engine.FlutterEngine@9d12774I/flutter (30370):  Current application lifecycle state  : AppLifecycleState.pausedI/flutter (30370):  The app goes into the background  paused

Click again to return to the application interface :

• Interface state :

• Print log :

I/flutter (30370):  Current application lifecycle state  : AppLifecycleState.resumedI/flutter (30370):  Application enters the front desk  resumedD/FlutterView(30370): Attaching to a FlutterEngine: io.flutter.embedding.engine.FlutterEngine@9d12774

Full log :

#  Press the menu key I/flutter (30370):  Current application lifecycle state  : AppLifecycleState.inactiveI/flutter (30370):  App goes inactive  inactiveD/FlutterView(30370): Detaching from a FlutterEngine: io.flutter.embedding.engine.FlutterEngine@9d12774I/flutter (30370):  Current application lifecycle state  : AppLifecycleState.pausedI/flutter (30370):  The app goes into the background  paused#  Go back to the screen I/flutter (30370):  Current application lifecycle state  : AppLifecycleState.resumedI/flutter (30370):  Application enters the front desk  resumedD/FlutterView(30370): Attaching to a FlutterEngine: io.flutter.embedding.engine.FlutterEngine@9d12774

Four 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Plug in download address : https://pub.dev/packages
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_cmd ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/15547438 ( The source code snapshot of this blog , You can find the source code of this blog )