[shutter] shutter page life cycle (initialization period | createstate | initstate | update period | build | destroy period | dispose)

One 、Flutter Page lifecycle

---

Flutter The page lifecycle is Flutter Page components Widget Life cycle of ;

The components of the page are StatefulWidget Components and StatelessWidget Components ;

1、StatelessWidget Component lifecycle function

StatelessWidget Component lifecycle function : Only two. , Namely createElement() , build() Two methods ;

abstract class StatelessWidget extends Widget { 
      /// Initializes [key] for subclasses.  const StatelessWidget({ 
     Key key }) : super(key: key);    @override  StatelessElement createElement() => StatelessElement(this);  @protected  Widget build(BuildContext context);}

2、StatefulWidget Component lifecycle function

StatefulWidget The component lifecycle is divided into three groups :

① Initialization period : createState , initState ;

② Update period : didChangeDependencies , build , didUpdateWidget ;

③ Destruction period : deactivate , dispose ;

Two 、StatefulWidget Component lifecycle

---

1、createState

createState function :

• Period : Initialization life cycle function
• Timing of invocation : establish StatefulWidget The first method after that is called. ;
• Abstract method : This method is an abstract method , This method must be overridden ;

  /// 1.  Initialization life cycle function   ///  establish  StatefulWidget  The first method after that is called.  ,  ///  This method is an abstract method  ,  Must cover   @override  _WidgetLiftCyclePageState createState() => _WidgetLiftCyclePageState();

2、initState

initState function :

• Period : Initialization life cycle function
• Timing of invocation : The method is to create Widget Component is the first method besides the construction method ,
• Corresponding method : Corresponding Android Medium onCreate Method ; Corresponding iOS Medium viewDidLoad Method ;
• Common usage : Perform some initialization operations in this method ;

  /// 2.  Initialization life cycle function   ///  The method is to create  Widget  Component is the first method besides the construction method   ///  This method corresponds to  Android  Medium  onCreate  Method   ///  Corresponding  iOS  Medium  viewDidLoad  Method   ///  Common usage  :  Perform some initialization operations in this method   @override  void initState() { 
        print("initState");    super.initState();  }

3、didChangeDependencies

didChangeDependencies function :

• Period : Life cycle function of update period ;
• Timing of invocation : ① establish Widget When the component , Call complete initState After the method , Call the method ; ② InheritedWidget relevant ( Temporary does not involve ) ;

  /// 3.  Life cycle function of update period   ///  Method call timing  :  /// ①  establish  Widget  When the component  ,  Call complete  initState  After the method  ,  Call the method   /// ② InheritedWidget  relevant  (  Temporary does not involve  )  @override  void didChangeDependencies() { 
        ///  The method must call the method of the parent class at the beginning     super.didChangeDependencies();    print("didChangeDependencies");  }

4、build

build function :

• Period : Life cycle function of update period ;
• Timing of invocation : ① Call complete didChangeDependencies Method is called ; ② call setState After method , This method will also be called ;
• Method function : This method is called every time the page is rendered ;

  /// 4.  Life cycle function of update period   ///  Method call timing  :  /// ①  Call complete  didChangeDependencies  Method is called   /// ②  call  setState  After method  ,  This method will also be called  ;  ///  This method is called every time the page is rendered   @override  Widget build(BuildContext context) { 
        print("build");    return Scaffold(      appBar: AppBar(        //  title         title: Text("StatefulWidget  Page lifecycle "),        //  Back off button         leading: BackButton(),      ),      body: Center(        child: Column(          children: <Widget>[            RaisedButton(              //  Click event               onPressed: (){ 
                    //  Callback update period   Life cycle function                 setState(() { 
                    });              },              child: Text(" call  setState()  Method "),            ),          ],        ),      ),    );  }

5、didUpdateWidget

didUpdateWidget function :

• Period : Life cycle function of update period ;
• Timing of invocation : This lifecycle method is not often called , This method is called only when the parent container component is redrawn ;
• Methods and mechanisms : Incoming oldWidget Parameters are old component information , Change the current Widget With the old Widget Contrast , If it's not equal , Then perform additional operations ;

  /// 5.  Life cycle function of update period   ///  Method call timing  :  This lifecycle method is not often called  ,  This method is called only when the parent container component is redrawn   ///  Methods and mechanisms  :  Incoming  oldWidget  Parameters are old component information  ,  ///  Change the current  Widget  With the old  Widget  Contrast  ,  If it's not equal  ,  Then perform additional operations   ///  Such as  :  The properties of components are not equal  ,  The values of the fields are not equal   @override  void didUpdateWidget(WidgetLiftCyclePage oldWidget) { 
        super.didUpdateWidget(oldWidget);    print("didUpdateWidget");  }

6、deactivate

deactivate function :

• Period : Life cycle function of destruction period ;
• Timing of invocation : This lifecycle method is not often called , Call only when the component is removed ;

  /// 6 .  Life cycle function of destruction period   ///  Method call timing  :  This lifecycle method is not often called  ,  Call only when the component is removed   ///  The method in  dispose  Method was previously called   @override  void deactivate() { 
        super.deactivate();    print("deactivate");  }

7、dispose

dispose function :

• Period : Life cycle function of destruction period ;
• Timing of invocation : Called when a component is destroyed , To release and destroy resources in this method ;

  /// 7 .  Life cycle function of destruction period   ///  Method call timing  :  Called when a component is destroyed  ,  To release and destroy resources in this method   @override  void dispose() { 
        super.dispose();    print("dispose");  }

3、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';class WidgetLiftCyclePage extends StatefulWidget { 
      /// 1.  Initialization life cycle function   ///  establish  StatefulWidget  The first method after that is called.  ,  ///  This method is an abstract method  ,  Must cover   @override  _WidgetLiftCyclePageState createState() => _WidgetLiftCyclePageState();}class _WidgetLiftCyclePageState extends State<WidgetLiftCyclePage> { 
      /// 2.  Initialization life cycle function   ///  The method is to create  Widget  Component is the first method besides the construction method   ///  This method corresponds to  Android  Medium  onCreate  Method   ///  Corresponding  iOS  Medium  viewDidLoad  Method   ///  Common usage  :  Perform some initialization operations in this method   @override  void initState() { 
        print("initState");    super.initState();  }  /// 3.  Life cycle function of update period   ///  Method call timing  :  /// ①  establish  Widget  When the component  ,  Call complete  initState  After the method  ,  Call the method   /// ② InheritedWidget  relevant  (  Temporary does not involve  )  @override  void didChangeDependencies() { 
        ///  The method must call the method of the parent class at the beginning     super.didChangeDependencies();    print("didChangeDependencies");  }  /// 4.  Life cycle function of update period   ///  Method call timing  :  /// ①  Call complete  didChangeDependencies  Method is called   /// ②  call  setState  After method  ,  This method will also be called  ;  ///  This method is called every time the page is rendered   @override  Widget build(BuildContext context) { 
        print("build");    return Scaffold(      appBar: AppBar(        //  title         title: Text("StatefulWidget  Page lifecycle "),        //  Back off button         leading: BackButton(),      ),      body: Center(        child: Column(          children: <Widget>[            RaisedButton(              //  Click event               onPressed: (){ 
                    //  Callback update period   Life cycle function                 setState(() { 
                    });              },              child: Text(" call  setState()  Method "),            ),          ],        ),      ),    );  }  /// 5.  Life cycle function of update period   ///  Method call timing  :  This lifecycle method is not often called  ,  This method is called only when the parent container component is redrawn   ///  Methods and mechanisms  :  Incoming  oldWidget  Parameters are old component information  ,  ///  Change the current  Widget  With the old  Widget  Contrast  ,  If it's not equal  ,  Then perform additional operations   ///  Such as  :  The properties of components are not equal  ,  The values of the fields are not equal   @override  void didUpdateWidget(WidgetLiftCyclePage oldWidget) { 
        super.didUpdateWidget(oldWidget);    print("didUpdateWidget");  }  /// 6 .  Life cycle function of destruction period   ///  Method call timing  :  This lifecycle method is not often called  ,  Call only when the component is removed   ///  The method in  dispose  Method was previously called   @override  void deactivate() { 
        super.deactivate();    print("deactivate");  }  /// 7 .  Life cycle function of destruction period   ///  Method call timing  :  Called when a component is destroyed  ,  To release and destroy resources in this method   @override  void dispose() { 
        super.dispose();    print("dispose");  }}

Running effect :

Print log : Enter interface , Click on

3

3

3 Next button , Then exit the interface ;

• Enter interface : First call initState Method , And then call didChangeDependencies Method , Last call build Method ;

I/flutter (21393): initStateI/flutter (21393): didChangeDependenciesI/flutter (21393): build

• Click button : Print once every time you click the button build , A total of $3$

I/flutter (21393): buildI/flutter (21393): buildI/flutter (21393): build

• Exit the screen : First call deactivate Method , Last call dispose Method ;

I/flutter (21393): deactivateI/flutter (21393): dispose

• Full log :

Performing hot reload...Syncing files to device Pixel 2...Reloaded 2 of 489 libraries in 510ms.I/flutter (21393): initStateI/flutter (21393): didChangeDependenciesI/flutter (21393): buildI/flutter (21393): buildI/flutter (21393): buildI/flutter (21393): buildI/flutter (21393): deactivateI/flutter (21393): dispose

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 )