Shulou(Shulou.com)06/02 Report--

This article is to share with you about how to use Flutter. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Preface

Before we start to learn new technologies, we always have to learn the most basic things, just like when we come into contact with Android, we have to learn all four components for a long time. Do you still remember the life cycle of Android? First, let's review the life cycle in Android.

Let's not say more about this, but summarize the commonly used scenarios:

1. Start Activity: the system will first call the onCreate method, then the onStart method, and finally call onResume,Activity to enter the running state. two。 The current Activity is overwritten or locked by another Activity: the system calls the onPause method to suspend the execution of the current Activity. 3. The current Activity returns to the foreground or unlock screen from the overwritten state: the system will call the onResume method and enter the running state again. 4. The current Activity moves to the new Activity interface or presses the Home key to return to the home screen, and retreats itself to the background: the system will first call the onPause method, and then the onStop method, entering a stagnant state. 5. The user goes back to this Activity: the system will first call the onRestart method, then the onStart method, and finally the onResume method to enter the running state again. 6. The current Activity is overwritten or invisible in the background, that is, in steps 2 and 4, the system runs out of memory and kills the current Activity, and then the user returns to the current Activity: call the onCreate method, onStart method and onResume method again to enter the running state. 7. User exits the current Activity: the system first calls the onPause method, then the onStop method, and finally the onDestory method to end the current Activity.

Emmm, I believe the friends should remember by now, the foreplay is ready, let's get to the topic and talk about our protagonist "State" today.

2. Widget concept

Before our protagonist takes the stage, let's get to know his little friend.

Almost all objects in Flutter are a Widget. Unlike "controls" in native development, widget in Flutter has a broader concept. It can represent not only UI elements, but also some functional components such as GestureDetector widget for gesture detection, Theme for application topic data transfer, and so on. Controls in native development usually only refer to UI elements.

3. The introduction of State

StatelessWidget (for scenarios that do not require state maintenance)

Abstract class StatelessWidget extends Widget

StatefulWidget (for scenarios that need to maintain state)

Abstract class StatefulWidget extends Widget

We can see from the above code that they all inherit one thing, Widget, so take a simple look at this class first.

@ immutable abstract class Widget extends DiagnosticableTree {const Widget ({this.key}); final Key key; @ protected Element createElement (); @ override String toStringShort () {return key = = null?'$runtimeType':'$runtimeType-$key';} @ override void debugFillProperties (DiagnosticPropertiesBuilder properties) {super.debugFillProperties (properties); properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense } static bool canUpdate (Widget oldWidget, Widget newWidget) {return oldWidget.runtimeType = = newWidget.runtimeType & & oldWidget.key = = newWidget.key;}}

There is a common method in the above code that needs to be rewritten every time it is inherited.

@ override StatefulElement createElement () = > StatefulElement (this)

Continue to track StatefulElement and find that there is a widget.createState () method. If you find it, you should continue. It is better to kill the wrong person than to let go.

Class StatefulElement extends ComponentElement {/ Creates an element that uses the given widget as its configuration. StatefulElement (StatefulWidget widget): _ state = widget.createState (), super (widget) {. Assert (_ state._element = = null); _ state._element = this; assert (_ state._widget = = null); _ state._widget = widget; assert (_ state._debugLifecycleState = = _ StateLifecycle.created);}

Click on the createState method we finally found today's protagonist, yes, this is it, State, can not escape.

@ protected State createState ()

Life cycle at this point, we have found what we want, as mentioned earlier, Android has its own life cycle, then as a Flutter also has its own unique life cycle

Well, I saw the initState method at a glance. I still remember that when a network request or the initialization of a variable, it is always written into this method.

@ override void initState () {/ / TODO: implement initState super.initState (); _ loadItemPage ();}

We can describe the above method in three parts, as shown in the following figure:

It can be regarded as three stages.

Initialize (insert render tree)

Constructor function

Does not belong to the life cycle because the widget property of State is empty at this time, and the widget property cannot be accessed in the constructor at this time

InitState

/ Called when this object is inserted into the tree. This function is called only once in the life cycle. You can do some initialization work here, such as initializing variables for State

DidChangeDependencies

/ Called when a dependency of this [State] object changes. This function will be called immediately after initState

State change (exists in the render tree)

DidUpdateWidget

/ Called whenever the widget configuration changes. DidUpdateWidget is called when the state of the component changes, such as setStat

Destroy (remove from rendered tree species)

Deactivate

/ Called when this object is removed from the tree. This function is called before dispose. Copy the code

Dispose

/ Called when this object is removed from the tree permanently. Once the component is destroyed at this stage, this function generally removes the listener and cleans up the environment.

This function is called only once in the life cycle. Here you can do some initialization work, such as initializing variables for State.

Roughly like this, finally, let's sum up with a chart.

Whether the number of phase calls supports setState constructor 1 No initState1 supports but is not valid (using setState is the same as not) didChangeDependencies > = 1 supports but invalid didUpdateWidget > = 1 supports but invalid deactivate > = 1 No dispose1 No

Example analysis, some people may say, bb for so long, Mao did not see one, so said so much, do not have some practical how to live in the previous bb? Somebody, get the code.

Import 'package:flutter/material.dart'; class LifeState extends StatefulWidget {@ override _ lifeStates createState () = > _ lifeStates ();} class _ lifeStates extends State {@ override void initState () {/ / TODO: implement initState super.initState (); print (' initState');} @ override void didChangeAppLifecycleState (AppLifecycleState state) {print (state.toString ()) } @ override void didChangeDependencies () {/ / TODO: implement didChangeDependencies super.didChangeDependencies (); print ('didChangeDependencies');} @ override void didUpdateWidget (LifeState oldWidget) {super.didUpdateWidget (oldWidget); print (' didUpdateWidget');} @ override Widget build (BuildContext context) {print ('build') / / TODO: implement build return MaterialApp (home: Center (child: GestureDetector (child: new Text ('lifeCycle'), onTap: () {Navigator.of (context). Push (new MaterialPageRoute (builder: (BuildContext c) {return new Text ('sdfs');});},));} @ override void reassemble () {/ / TODO: implement reassemble super.reassemble (); print (' reassemble');} @ override void deactivate () {/ / TODO: implement deactivate super.deactivate () Print ('deactivate');} @ override void dispose () {/ / TODO: implement dispose super.dispose (); print (' dispose');}}

Test result

Create widget

InitState didChangeDependencies build

Exit page

Deactivate dispose

Click the hot load button

Reassemble didUpdateWidget build

App from display to background (home key)

AppLifecycleState.inactive AppLifecycleState.paused

App returns to the front desk from the background.

AppLifecycleState.inactive AppLifecycleState.resumed, thank you for your reading! This is the end of the article on "how to use Flutter". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.