Flutter State life cycle Flutter Widget life cycle Flutter application life cycle

Question: Don’t give up until the last moment. Regardless of whether the ending is successful or not, as long as you work hard and try your best, you will have a clear conscience.


In Flutter applications, there are two life cycles, one is the life cycle of Widget and the other is the life cycle of the application. This article explains how to implement life cycle monitoring in Flutter similar to Activity in Android through the flutter_life_state dependency library, similar to iOS UIViewController Life cycle.
Insert picture description here

1 Add dependency

Click to view the latest version of flutter_life_state pub warehouse

dependencies:
  flutter_life_state: ^1.0.0

Of course, you can also click to view the github source code , in Flutter, you can also use git to quote as follows:

dependencies:
	shake_animation_widget:
	      git:
	        url: https://github.com/zhaolongs/flutter_life_state.git

Then add lifeFouteObserver at the entrance of the person:


import 'package:flutter_life_state/flutter_life_state.dart';

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      ... 
      navigatorObservers: [
      lifeFouteObserver
      ],
    );
  }
}

Then import the package in the used Widget page as follows:

import 'package:flutter_life_state/flutter_life_state.dart';

2 Monitor the Widget page life cycle

When using flutter_life_state to monitor the life cycle of a Widget, you need to inherit BaseLifeState in the State corresponding to your StatefulWidget, as shown in the following code listing 2-1:

///代码清单 2-1
class TestPage extends StatefulWidget {
    
    
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends BaseLifeState<TestPage> {
    
    
  @override
  Widget build(BuildContext context) {
    
     ...}
}

When the TestPage shown in Listing 2-1 is opened using Navigator.push, the life cycle of BaseLifeState will be called as shown in the following figure:
Insert picture description here
Of course, if you need to deal with your business needs in the life cycle, directly overwrite the parent class BaseLifeState The life cycle function is just fine, as shown in the following code listing 2-2:

///代码清单 2-2
class TestPage extends StatefulWidget {
    
    
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends BaseLifeState<TestPage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    ...}

  @override
  void onCreat() {
    
    
    super.onCreat();
    print(" A 页面 onCreat");
  }

  @override
  void onDestory() {
    
    
    super.onDestory();
    print(" A 页面 onDestory");
  }
}

3 BaseLifeState life cycle overview

The BaseLifeState life cycle callback fully implements the life cycle of Activity and iOS UIViewController in Android, as shown in the following source code listing 3-1.

///源码清单 3-1 
class StateLiveState{
    
    
  ///页面即将创建时回调
  void onWillCreat(){
    
    }
  ///页面创建时的回调 已创建好
  void onCreat(){
    
    }
  ///页面可见时回调
  void onStart() {
    
    }
  ///页面获取焦点时回调
  void onResumed() {
    
    }
  ///页面失去焦点时回调
  void onPause() {
    
    }
  ///页面不可见时回调
  void onStop() {
    
    }
  ///页面即将销毁时回调
  void onWillDestory(){
    
    }
  ///页面销毁
  void onDestory(){
    
    }
}

The complete lifetime of the Widget will occur between the [onCreate] call and the [onDestroy] call:

  • The onWillCreat method generally initializes some data in this method. In this method, State and BuildContext are not yet bound, so context cannot be used, just like the data initialized in the initState method of [State]. The operation is performed in the method callback.
  • The onCreate method is called back when the page is visible, that is, after the first frame of the page is drawn, it is similar to the onCreat method in Android and the viewDidLoad method of ViewController in iOS.
  • The onStart method is called back after [onWillCreat], which is similar to the onStart method of Android's Activity and similar to the viewWillAppear of ViewController in iOS.
  • The onResumed method is executed after the [onStart] method, which is a callback when the page has focus, similar to the onResumed method of Android's Activity, and similar to the viewDidAppear of the ViewController in iOS.
  • The onPause method is a callback when the page loses focus, similar to the onPause method of Android's Activity, and similar to the viewWillDisappear of ViewController in iOS.
  • The onStop method is a callback when the page is not visible, similar to the onStop method of Android's Activity, and similar to the viewDidDisappear of ViewController in iOS.
  • The onWillDestory method is available when the context is called when the page is about to be destroyed. Generally, the unbinding operation is performed here and only called once.
  • The onDestory method calls back the context when the page is destroyed and cannot be used. It is similar to the onDestory of Android Activity and the dealloc of ViewController in iOS.

4 Life cycle usage scenarios

4.1 Page A-Page B-Page A

Insert picture description here

4.2 Dialog box

Insert picture description here
Insert picture description here

Guess you like

Origin blog.csdn.net/zl18603543572/article/details/108415114