“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

State management

“State management” is a constant theme in responsive programming frameworks, and the ideas handled in React, Vue, and Flutter are all the same.

Common state management methods:

  • WidgetManage your state;
  • WidgetmanagementThe child widgetsThe state;
  • Mixed management:The parent WidgetandThe child widgetsAll management state;

So, what if you decide which management plan to use? Here are some official suggestions:

  • If the status is user data, such as selected status and slider position, the status is recommended to be changed fromThe parent WidgetManagement;
  • If the state is an interface effect, such as color, animation, etc., then the state is recommended byWidgetTo manage themselves;
  • If the states are differentWidgetIf the value is shared, you are advised to change the statusThe parent WidgetManagement;

Easy encapsulation when managing state within widgets; Managing state in the parent Widget is more flexible. If you are unsure which state management to choose during development, it is recommended to manage it in the parent Widget. The more flexible it is, the easier it is to extend it.

Counter case

Note that the properties of many of the widgets ina Flutter are modified by final. These properties can only be assigned once and cannot be modified again. Therefore, the rendering mechanism of a Flutter is to replace the original widgets with new ones. There is no need for the interface to have state for Flutter; But if all interfaces have no state, then complex interface design and data retention will be problematic for developers;

Actually, in our Flutter initialization project, click the button and the number change process is a small case of state management. In the process of number change, the rendering is realized by replacing one part with another. Although the part has no state, the number changes, so the number should be retained. For this situation, Flutter provides us with stateful widgets. In stateful widgets, the rendering logic and data logic are managed separately. The data logic is retained, and the rendering logic, i.e. the UI, is not.

Let’s take a first look at state management today with a small example of a counter;

Let’s look at a piece of code:We added a bubble to the screen, and the bubble showed the number, throughcountThe assignment;

We add a hover button to the interface, and then click the button to changecountValue:And what we found was that when the button was clicked,countChanges have been made, but the numbers displayed on the screen have not changed, and remain the default0; And, at this point if we useThermal overloadRefresh the screen, then click the button again to findcountAnd from0Here we go. In other words,countThe value of is not retained;

If we need to change the number on the interface when we click, we need to do at least two things:

  • Renders the interface when the button is clicked
  • To putcountThe value of is retained

And we notice that at this pointStateDemoIs the warning (wavy line), we mouse over toStateDemoOn, the following warning message is displayed:This warning message tells us that inStateDemoIn, one or more attributes are not usedfinalEmbellish, since uselessfinalThe developer may modify the value of the property more than once in subsequent operations, so there are two solutions:

  • Use the attributefinalModifier, then the attribute is allowed to be assigned only once;
  • willStateDemoModified toA stateful;

It was clear that our feature would need to be changed many timescountProperty, so we can only modifyStateDemoforStateful (StatefulWidget); The modified code is as follows:At this point, we click the button again to see the result:And what we found is,countThe value of is changed, but the number displayed on the interface remains unchangedThermal overloadAnd then check the effect: Thermal overloadAfter that, the interface displays the changed6, click the button again and you will find that the printed result is from6It starts to add up, and it becomes 1, 2, 37That is to saycountWe have reserved the state of, but not incountThe change is, let’s just rerender the interface;

So we can be incountWhen modifying, can refresh the interface at the same time, at this time we can usesetStateMethods:We will becount += 1Code usingsetStateMethod, so every time I click a button,count[Bug Mc-10894] – Changes will rerender the interface

When the setState method is called, the build method is re-executed to refresh the interface. The rendering mechanism of Flutter looks up the entire rendering tree to see which part count affects. When the render page is refreshed, only the affected part will be re-rendered, not the whole page.