Life Cycle one: createState

The createState function is called by the Framework when the StatefulWidget component is inserted into the component tree. Each component has a separate State. When the createState function is completed, Mounted is set to true by the Framework.

class StatefulWidgetDemo extends StatefulWidget {
  @override
  _StatefulWidgetDemoState createState() => _StatefulWidgetDemoState();
}
Copy the code

Life cycle two: initState

The initState function is called by the Framework when the component is inserted into the tree (after createState). This function is called only once, and subclasses usually override this method to perform initialization operations, such as loading network data, To override this method, be sure to call super.initstate () as follows:

@override void initState() { super.initState(); // Initialize... }Copy the code

If the component needs to subscribe to notifications, such as ChangeNotifier or Stream, the subscription and unsubscription notifications need to be handled correctly in different life cycles.

  • Subscribe to notifications in initState.
  • In the didUpdateWidget, if an old component needs to be replaced, unsubscribe in the old object and subscribe to notifications in the new object.
  • And unsubscribe in Dispose.

Example of an incorrect way to write in initState:

@override
void initState() {
  super.initState();
  showDialog(context: context,builder: (context){
    return AlertDialog();
  });
}
Copy the code

The exception information is as follows: dependOnInheritedWiddgetOfExactType<_LocalizationsScope>() or dependOnInheritedElement() was Called before _StatefulLifecycleState.initState() completed. Solution:

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
    showDialog(context: context,builder: (context){
      return AlertDialog(title: Text('AlertDialog'),);
    });
  });
}
Copy the code

Lifecycle three: didChangeDependencies

The didChangeDependencies method is called by the Framework immediately after initState. In addition, this method is called when a dependency of this State object changes, such as when an InheritedWidget on which it depends changes, and the Framework calls it to notify the component of the change.

This method is the first life cycle to use BuildContext dependOnInheritedWidgetOfExactType method, this method will seldom be rewritten, because the Framework will change in dependence on call when build, The scenario where you need to rewrite this method is when a dependency changes and you need to do some time-consuming tasks, such as network request data.

The build method is called immediately after the didChangeDependencies method is called when the component state becomes dirty.

Life cycle 4: Build

This method is the one we’re most familiar with, where various components are created and drawn to the screen. The Framework calls this method in a number of cases:

  • After calling the initState method.
  • After calling the didUpdateWidget method.
  • Upon receipt of the call to setState.
  • When the dependency of this State object changes (for example, the InheritedWidget for the dependency changes).
  • After calling deActivate, reinsert the State object to another location in the tree.

This method can be called in every frame and should contain only the code that builds the component, not any additional functionality, especially for time-consuming tasks.

Life cycle 5: didUpdateWidget

This function is called when a component’s configuration changes, and when the parent component rebuilds a new component with the same runtimeType and widget. key, the Framework updates the component properties of the State object to reference the new component. This method is then called with the previous component as an argument.

@override
void didUpdateWidget(covariant StatefulLifecycle oldWidget) {
  super.didUpdateWidget(oldWidget);
  print('didUpdateWidget');
}
Copy the code

In this method, the current component is typically compared to the previous component. After the Framework calls this method, it sets the component to the dirty state and then calls the Build method, so there is no need to call the setState method in this method.

Life cycle 6: Deactivate

This method is called when the framework removes the State object from the tree. In some cases, the framework reinserts the State object to another location in the tree (for example, if the subtree State object containing the tree is migrated from one location in the tree to another location), The framework will call the Build method to provide the State object for its new location in the tree.

##### Life Cycle seven: Dispose will be called when the framework permanently removes the State object from the tree. Unlike Deactivate, which can also be inserted back into the tree, Dispose means that the State object will never be in build.

A few key concepts:

  • Mounted is an attribute in the State object. It indicates whether the component is in the tree. You are advised to determine Mounted before setState
  • Dirty Indicates that the component is currently dirty. The build function will be executed at the next frame, and the component is dirty after the setState method is called or the didUpdateWidget method is executed
  • Clean corresponds to dirty. Clean indicates that the component is in the clean state. In the clean state, the component does not execute the build function