A Flutter has its own life cycle, just like an iOS ViewController or an Android Activity. Everything in a Flutter is a Widget, and Widget components have their own life cycle.

Life cycle flow chart

Page life cycle

The WidgetsBindingObserver can be used to determine the status of Flutter, which can be used to determine the status of Flutter. The WidgetsBindingObserver should be written somewhere wrapped by the MaterialApp or other topic.

AppLifecycleState Indicates the corresponding status

  1. Inactive The inactive application is inactive and unable to respond to user input
  2. The Pause application is invisible and unable to respond to user input, running in the background
  3. The Resumed application is visible and responds to user input

The life cycle looks like this

  1. As soon as you enter the Widget, AppLifecycleState is not called
  2. Switch from foreground to background and call AppLifecycleState inactive -> AppLifecycleState Pause
  3. Go from background to foreground and call AppLifecycleState inactive -> AppLifecycleState resumed
  4. Upon return from the page, Dispose is called

Implementation code, which can be detected in this way

class _AppLifecycleState extends State<AppLifecycle> with WidgetsBindingObserver {

  void dispose() {
    super.dispose();
    print('Page destruction'); WidgetsBinding.instance? .removeObserver(this);
  }

  @override
  void initState() {
    super.initState(); WidgetsBinding.instance? .addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    switch (state) {
      case AppLifecycleState.inactive:
        // The application is idle and does not receive input events from the user.
        // Note that this state is triggered when switching to the background, so the process should freeze the window first and then stop the UI
        print('AppLifecycleState.inactive');
        break;
      case AppLifecycleState.paused:
        // The application is not visible
        print('AppLifecycleState.paused');
        break;
      case AppLifecycleState.resumed:
        // This state is not triggered when entering the page
        // The application is visible and can respond to user input events
        print('YMAppLifecycleState.resumed');
        break;
      case AppLifecycleState.detached:
        // Leave the current page
        print('AppLifecycleState.detached');
        break; }}Copy the code

Some other state callback

  • The bottom memory callback occurs, native also has this method
@override
void didHaveMemoryPressure() {
  super.didHaveMemoryPressure();
  print('Low memory callback');
}
Copy the code
  • Apply callbacks that change size
@override
void didChangeMetrics() {
  super.didChangeMetrics();
  print('Apply size change callback');
}
Copy the code
  • Page pop – out callback
@override
Future<bool> didPopRoute() {
  print('Page pop out callback')
  return super.didPopRoute();
}
Copy the code
  • Callback for page push
@override
Future<bool> didPushRoute(String route) {
  print('Callback for page push');
  return super.didPushRoute(route);
}
Copy the code
  • Switch theme callback
@override
void didChangePlatformBrightness() {
  super.didChangePlatformBrightness();
  print('Switch theme callback');
}
Copy the code

Lifecycle of Widget components

Everything in Flutter is composed of components. Components can be divided into stateless components, statelessWidgets, and stateful components, statefulWidgets, which can directly change the state of the current component without creating a new instance. The StatelessWidget needs to create a new instance.

More state resolution

1. createState

CreateState is the method to createState in StatefulWidget. CreateState is executed immediately when a new StatefulWidget is created.

2. initState

When StatefulWidget is first created, initState is the first method called after StatefulWidget is created and is executed only once, similar to viewDidLoad() on IOS, onCreate on Android, So the View is not rendered, but the StatefulWidget has been loaded into the render tree, and the value of mount of the StatefulWidget will be true until Dispose calls it. This is where we do some of the initialization.

3. didChangeDependencies

When the StatefulWidget is first created, the didChangeDependencies method is called immediately after the initState method, and then not when the StatefulWidget is refreshed. DidChangeDependencies will not be called until the InheritedWidget that your StatefulWidget depends on has changed, so didChangeDependencies may be called multiple times.

4. build

When StatefulWidget is first created, the Build method is called immediately after the didChangeDependencies method. Another scenario where the Build method is called is whenever the UI needs to be rerendered, So build gets called multiple times and returns the Widget to render.

5. didUpdateWidget

DidUpdateWidget is a life cycle that we don’t normally use and is called only when a Widget is reused using a key.

6. deactivate

When a State object is removed from the render tree, the DeActivate lifecycle is called, which signals that the StatefulWidget is about to be destroyed, but sometimes the State is not destroyed, but reinserted into the render tree.

7. dispose

When the View no longer needs to be displayed and is removed from the render tree, State is permanently removed from the render tree and Dispose life cycle is called. At this time, you can do some unlisten and animation operations in dispose, which is the opposite of initState.

Life cycle of the StatelessWidget

  1. A constructor
  2. The build method

The life cycle of StatefulWidget

  1. Widget constructor
  2. The Widget CreateState
  3. Constructor of State
  4. The initState method of State
  5. The didChangeDependencies method is called when the InheritedWidget of the dependency changes
  6. State build when calledsetStateMethod, which recalls build to render
  7. State’s Dispose is called when the Widget is destroyed

Implementation code, which can be detected in this way

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

  @override
  _StatefulLifeDemoState createState(){
    print('createState');
    return_StatefulLifeDemoState(); }}class _StatefulLifeDemoState extends State<StatefulLifeDemo> {

  @override
  void initState() {
    super.initState();
    print('initState');
  }

  @override
  void dispose() {
    super.dispose();
    print('dispose');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies');
  }

  @override
  void didUpdateWidget(covariant StatefulLifeDemo oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('didUpdateWidget');
  }

  @override
  void setState(VoidCallback fn) {
    super.setState(fn);
    print('setState');
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('111')); }}Copy the code