APP learning experience to do with Flutter: Flutter widget life cycle

The first look at the article a friend to me and, occasionally releases makers face questions, Android architecture technical knowledge and analytical and other content, as well as Android source code learning PDF + Notes + + Advanced video interview document sharing.

More you can also see my GitHub link: https://github.com/Meng997998/AndroidJX
reading about the stars light up the way oh

Foreword

Have been doing lately app with a flutter, feel like writing web pages or react with vue Like, pretty fun. In order to deepen their understanding of Flutter and record your own learning experience.

Widget、StatefulWidget、StatelessWidget

See the source code to know the relationship between the three, the code is as follows:

abstract class Widget extends DiagnosticableTree {
  const Widget({ this.key });
  final Key key;
  @protected
  Element createElement();
  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }  
}
abstract class StatelessWidget extends Widget {
  const StatelessWidget({ Key key }) : super(key: key);
  @override
  StatelessElement createElement() => StatelessElement(this);
  @protected
  Widget build(BuildContext context);  
}abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
  @override
  createElement() => StatefulElement(this);
  @protected
  State createState();
}

StatelessWidget no state can react in analogy fool assembly;

There StatefulWidget state, the state of the object in the presence of State; it is generally said that the life cycle of all refers to the State of the life cycle;

abstract class State extends Diagnosticable {
  void initState() { }
  void didChangeDependencies() { }
  Widget build(BuildContext context);
  void setState(VoidCallback fn) {}
  void deactivate() { }
  void dispose() { }
  void reassemble() { }
  void didUpdateWidget(covariant T oldWidget) { }
}

phenomenon

In order to verify the State's life cycle, from my operation Home-> page1-> page2-> page1-> Home

From Home-> page1, this is the initialization process

I/flutter ( 4980): [debug],[lifeCycle], initState
I/flutter ( 4980): [debug],[lifeCycle], didChangeDependencies
I/flutter ( 4980): [debug],[lifeCycle], build

From page1-> page2, is temporarily removed equivalent page1

I/flutter ( 4980): [debug],[lifeCycle], deactivate
I/flutter ( 4980): [debug],[lifeCycle], didChangeDependencies
I/flutter ( 4980): [debug],[lifeCycle], build

From page2-> page1, equivalent to page1 has been shifted back

I/flutter ( 4980): [debug],[lifeCycle], deactivate
I/flutter ( 4980): [debug],[lifeCycle], didChangeDependencies
I/flutter ( 4980): [debug],[lifeCycle], build

From page1-> Home, equivalent to page1 be deleted

I/flutter ( 4980): [debug],[lifeCycle], deactivate
I/flutter ( 4980): [debug],[lifeCycle], dispose

Summary of the life cycle

Direct pictures, should be very clear,

The life cycle of the above, there are two areas need to focus on understanding:

1. When the object changes dependent on state, when it is used in the state of shared data by the parent widget InheritedWidget, when the data changes, it calls the child widget didChangeDependencies ()

When the 2. widget rebuilding will call didUpdateWidget state of (); first of all to know that there is a state corresponding to each StatefulWidget; when the widget rebuilt, will first call canUpdate method to determine whether the widget needs to be updated; if the key and runtimeType are the same, it returns true, indicating that you can update widget, so call didUpdateWidget state of (); if the key or runtimeType not the same time, that there is no need to update, delete old and new to create it.

doubt

When attempts, there is a phenomenon, when the widget page can be seen between invisible switch, method calls are the same, are deativate-> didChangeDependencies-> build; There is a question, since it does not have why did we have seen the build? Or why can not all build the visible?

This question should be required to further tap the widget Flutter, the relationship element, render the tree, and so a further understanding of the principles and then to share Flutter UI Kazakhstan

At last

Now, many companies have projects on the flutter, and some company on the road in a flutter

People learn first step, I am concerned

Private letter I [] flutter flutter learning video collection

Learn more Android can also look at my GitHub link: https://github.com/Meng997998/AndroidJX, watching the stars, oh by the way it is lit