Actual combat of shutter statefulwidget

It took two years flutter, Have some experience , Some cases will be updated from today , Not empty head and brain , Only for practical use , For study or use flutter My little friend's reference , Learning is still shallow , If there is anything wrong, we hope all gods will correct it , So as not to mislead others , Thank you here. ~（ Originality is not easy. , Please indicate the source and author when forwarding

Be careful ： No special instructions ,flutter Version is 3.0+

        Widget： Components , This concept can be seen everywhere in large front-end development , Very easy to understand , So in Flutter in Widget Has a wide range of concepts , It can be said that almost all objects are Widget（ Everything is Widget It's also Flutter The core design idea of ）,Flutter through Widget Nested to build ui Of , This is also a lot of people vomit bad Flutter The place of , ha-ha ~

One .Widget

First look at the official explanation

/// Describes the configuration for an [Element].

        Widget Namely Element Configuration information , Here comes another important concept Element. that Element（ Elements ） And what is it , The official explanation is as follows ：

/// An instantiation of a [Widget] at a particular location in the tree.

         Literally Element yes Widget Example . This involves tree, Then I have to mention Flutter Of ” skshu “：Widgets Trees ,Element Trees and Render Trees （ Render tree ）.Widgets Tree generated Element Trees ,Element Tree generated Render Trees , This is also Flutter Rendering process of , In this article, we are wrong first Flutter The rendering process of has been explored too much , Understand first Widget The concept of .

Two .StatelessWidget and StatefulWidget

3、 ... and .StatefulWidget Use

1. According to the interface api The refresh data

@override
void initState() {
Api.getRelation(id).then((v) {
    setState(() {
              data = v;
     });
 });    
super.initState();
}

...

static ScaffoldState of(BuildContext context) {
    assert(context != null);
&nbsp;&nbsp;&nbsp;&nbsp;final ScaffoldState? result = context.findAncestorStateOfType<ScaffoldState>();
&nbsp;&nbsp;&nbsp;&nbsp;if (result != null)
&nbsp;&nbsp;&nbsp;&nbsp;return result;

...

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; For example, we need to call Scaffold Of openDraw() Open the side sliding drawer , You can use Scaffold.of(context) obtain State&nbsp;

Scaffold.of(context).openDrawer()

We can also imitate this way in actual development

Mode two ： adopt GlobalKey obtain state

&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; This way is also our common way , Follow vue in key The concept of using is the same , however Globalkey The cost is relatively large , Use as little as possible

final GlobalKey<State> _globalKey = GlobalKey();

...

_globalKey.currentState.function();

Mode three ： take state Directly exposed

&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; This author often uses , I think it's very convenient . For example, you need to customize the variable header component , Then you can call state Methods

class EditView extends StatefulWidget {

&nbsp; &nbsp; // You can customize the incoming header

&nbsp; &nbsp;&nbsp;final dynamic mainItem;

&nbsp; &nbsp; &nbsp;...

&nbsp;&nbsp;&nbsp;&nbsp;@override
&nbsp;&nbsp;&nbsp;&nbsp;Widget build(BuildContext context) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp; Column(children:[

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget.mainItem(this);&nbsp; &nbsp;// take state Expose

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;])

....

void xxFunction(){

}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; In use You can put the state Pass it to the head component , stay mainItem Component calls EditWidget Internal method of xxFunction().

EditView(

&nbsp; &nbsp; mainItem:(state)=>widget1(state)

)

widget1（state）{

&nbsp; &nbsp; state.xxFunction()

}

3. Call the method after the component is loaded

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WidgetsBinding We mentioned this in the previous article ,

/// Schedule a callback for the end of this frame.

.....

/// * [scheduleFrameCallback], which registers a callback for the start of
/// the next frame.

Call before the start of the next frame The method , It can be used as follows ：

@override
void initState() {
&nbsp;&nbsp;&nbsp;&nbsp;// initialization map
&nbsp;&nbsp;&nbsp;&nbsp;super.initState();

&nbsp;&nbsp;&nbsp;&nbsp;WidgetsBinding.instance.addPostFrameCallback((_) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Add method
&nbsp;&nbsp;&nbsp;&nbsp;});

}

Specific usage scenarios can be mined in your own project practice .