Flutter view Widget lifecycle

Flutter view Widget lifecycle

As an Android developer, you must be impressed by the Activity lifecycle. When you use Flutter, the Widget is the View, and its lifecycle is from creation to destruction. Widget StatelessWidgetStatefulWidget divides into two kinds, the two Widget lifecycle, respectively, as follows.

Life cycle of the StatelessWidget

The life cycle of a stateless Widget is simple; it has only one life cycle: Build

build

The build function is used to build the view and is called each time the page is refreshed. Typical usage is as follows:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),),),); }}Copy the code

The life cycle of StatefulWidget

The StatefulWidget lifecycle is organized as follows:

• Initialization: Insert render tree
• Running: Exists in the render tree
• Destroy: Remove from render tree

Initialization phase

createState

CreateState must be executed once and is used to create the state, which is executed when the StatefulWidget is created

initState

InitState is the first method to be called after StatefulWidget is created. It is called only once, just like createState, when the widget’s value is added to the render tree and mount becomes true, but is not rendered. You can do some initialization within this method. Use super.initstate () for override.

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

didChangeDependencies

DidChangeDependencies is called immediately after the initState function when the widget is first created, and is not called when the widget is refreshed. It is called by the Flutter Framework when a “dependency” changes whether the widget uses data from the InheritedWidget in the parent widget. DidChangeDependencies is called only after the InheritedWidget that the widget depends on has changed. This mechanism allows child components to update themselves when the InheritedWidget they depend on changes! For example, the didChangeDependencies method is called when the topic, locale, and so on change.

// Use InheritedWidget to save the current count of hits in ShareDataWidget's data property:  class ShareDataWidget extends InheritedWidget { ShareDataWidget({ @required this.data, Widget child }) :super(child: child); final int data; Static ShareDataWidget of(BuildContext Context) {static ShareDataWidget of(BuildContext context) {returncontext.inheritFromWidgetOfExactType(ShareDataWidget); Override bool updateShouldNotify(ShareDataWidget Old) {// This callback determines whether to notify data-dependent widgets in the subtree when data changestrue, then in the subtree is dependent on (call) of the build function of this widget / / child widgets ` state. DidChangeDependencies ` will be invokedreturnold.data ! = data; } } class _TestWidget extends StatefulWidget { @override __TestWidgetState createState() => new __TestWidgetState(); } // We then implement a child component, _TestWidget, that references the data in ShareDataWidget in its build method. class __TestWidgetState extends State<_TestWidget> { @override Widget build(BuildContext context) { // Use shared data in the InheritedWidgetreturn Text(ShareDataWidget
        .of(context)
        .data
        .toString());
  }

  @override
  void didChangeDependencies() { super.didChangeDependencies(); // The InheritedWidget in the parent or ancestor widget changes (updateShouldNotify returnstrue) will be called. // If there is no dependent InheritedWidget in the build, this callback will not be called.print("Dependencies change"); }}Copy the code

Note: If ShareDataWidget is not used in the build method of _TestWidget, its didChangeDependencies() will not be called because it does not depend on ShareDataWidget. The build method is also called after a dependency change, so didChangeDependencies are not required in most scenarios. However, if you need to perform some expensive operations after a dependency change, such as network requests, it is best to do so in this method to avoid doing these expensive operations every time you build().

build

The build function is called when the widget is first created, immediately after the didChangeDependencies method, and when the UI is re-rendered. Build only does widget creation. If you do anything else in the build, it will affect the UI rendering

In the operation of the

didUpdateWidget

DidUpdateWidget is called when the component’s state changes, such as setState.

The destruction

deactivate

When the State object is removed from the render tree, the DeActivate life cycle is called, which signals that the StatefulWidget is about to be destroyed. It’s also called when the page switches, because State’s position in the view tree changes but State is not destroyed, it’s reinserted into the render tree. To override, you must call super.deactivate().

dispose

Called when a view is removed from the render tree, State is permanently removed from the render tree, as opposed to initState, where mount is false. At this point, you can do some unlisten operations in dispose.

Conclusion: