State of analytic Widget

StatefulWidget have to deal with interactive, dynamically change the visual effects scenes

StatelessWidget for processing the static view showing stateless

So, StatelessWidget whether there is need to exist? Flutter is whether StatefulWidget of snake oil?

UI programming paradigm

In Flutter, how to adjust a control (Widget) show style, that is, UI programming paradigm.

Native systems (Android, iOS) or native JavaScript development, development is the imperative of view, it is necessary to accurately tell the operating system or browser with ways to do things. For example, if you want to change a copy of the interface, you need to find specific text control and call its methods of control commands to complete the text changes.

The following codes are displayed in Android, iOS and native Javascript, how to change the display control to copy a text Hello World:

// Android 设置某文本控件展示文案为 Hello World
TextView textView = (TextView) findViewById(R.id.txt); textView.setText("Hello World"); // iOS 设置某文本控件展示文案为 Hello World UILabel *label = (UILabel *)[self.view viewWithTag:1234]; label.text = @"Hello World"; // 原生 JavaScript 设置某文本控件展示文案为 Hello World document.querySelector("#demo").innerHTML = "Hello World!"; 

In contrast, the view of the development Flutter is declarative, the core idea is to design view and data separation, which is exactly the same React design ideas.

Flutter to achieve the same needs, will have to trouble spots: in addition to good design Widget layout program, but also need to maintain a copy in advance of data collection, centralized data and bindings for the changing needs of Widget, the Widget is completed based on this data set rendering.

However, when the need to change the copy interface, just change the copy data in the data set, and notify Flutter framework of re-rendering can be triggered Widget. Compared to view the imperative need to develop ways one by one to set a different formation (Widget) visual attributes, this is much more convenient way to be.

In conclusion, imperative programming emphasize the precise control of process details, but stressed that declarative programming by attempting to export the results as a whole. Corresponds to the Flutter, the intention is to bind to the component status of State, the result is the assembly after re-rendering. Widget in the lifecycle of the application to any changes in the State would be forced to rebuild Widget.

Among them, for after the completion of assembly created without changing the scene, binding status is optional. Here the "optional" on the Widget distinguish two types, namely: StatelessWidget without binding status, but StatefulWidget with a binding status. When changes to be built with the user interface does not change any state information necessary to select the use StatelessWidget, otherwise choose StatefulWidget. The former are generally used for display static content, and content interaction feedback latter for the existence presentation.

StatelessWidget

In the Flutter, Widget employed by the parent to the child, top-down manner constructed, the parent control Widget Widget display style, the style configuration provided by the parent in the construction of Widget.

The embodiment constructed as above Widget, some (such as Text, Container, Row, Column etc.) when creating, in addition to the configuration of these parameters do not depend on any other information, in other words, once they are no longer successfully created interest, nor respond to any changes in the data to redraw. In Flutter, such is called Widget StatelessWidget (stateless components).

Source Text example partially described StatelessWidget the build process.

class Text extends StatelessWidget { // 构造方法及属性声明部分 const Text(this.data, { key key, this.textAlign, this.textDirection, // 其他参数 ... }) : assert(data != null), textSpan = null, super(key: key); final string data; final TextAlign textAlign; final TextDirection textDirection; // 其他属性 ... @override Widget build(BuildContext context) { ... Widget result = RichText( // 初始化配置 ... ); ... return result; } } 

The code can be seen, after its constructor a list of attributes assigned, build then the method through which the sub-assembly RichText property list (Data such as text, textAlign alignment, text display, etc. textDirection direction) returns after initialization, then no internal Text then in response to changes in the external data.

So what scenarios should be used StatelessWidget it?

Simple rules to determine: whether a parent can completely control its Widget UI showing the effect of initialization parameter?  If so, then you can use StatelessWidget to design the interface of the constructor.

For example, an error message prompts bomb box controls, inherited StatelessWidget methods can be used to perform custom components. Counter button needs through inheritance StatefulWidget way to custom components.

StatefulWidget

Some Widget (such as Image, Checkbox) show, in addition to the parent incoming Widget initialize static configuration, also need to handle user interaction (for example, the user clicks a button), or change the internal data (for example, network data back package), and reflected in the UI. In other words, after these Widget created, also need care and response data to redraw changes. In Flutter, this type is called Widget StatefulWidget (stateful component).

StatefulWidget is implemented as State agents Widget class building design approach. Next, the part of the Image source to illustrate the structure of the process StatefulWidget.

Text and above the same, the Image class constructor receives the attribute parameters to be used by the class. However, the difference is, Image class does not build method to create the view, but to create a way to state the type of an object by createState _ImageState, and then build the object is responsible for this view.

The state objects to hold and handle state changes to Image class, so to _imageInfo property as an example to illustrate unfold.

"After the data has changed, please use the update: _imageInfo Widget attribute is used to load the real picture, once the State subject to change by listening to _imageInfo property occurred _handleImageChanged method, it will call setState method _ImageStage class framework immediately notify Flutter the _imageInfo data reload the picture!. " Flutter frame view state flag will be updated UI.

StatefulWidget not snake oil, should be used with caution

In fact, StatefulWidget abuse will directly affect the rendering performance Flutter application.

Widget is immutable, it means destruction + reconstruction update (build). StatelessWidget is static, once created the need to update; and for StateFulWidget, calling a method to update the data in the State setState class, will trigger the destruction and reconstruction of view, it will also indirectly trigger each of its child Widget destruction and reconstruction.

If the root layout is a StatefulWidget, in his State of Each call to update UI, it will be a whole page all Widget destruction and reconstruction.

Although the internal Flutter can minimize changes to the layer by Element realistic renderings of view, improve the rendering efficiency, rather than the destruction of the entire RenderObject tree reconstruction. However, the destruction of a large number of reconstruction Widget object can not be avoided. If a child Widget reconstruction involves a number of time-consuming operation, page rendering performance that will be a sharp decline.

Therefore, ** view shows the correct assessment needs to avoid unnecessary use of StatefulWidget, Flutter application rendering performance is the simplest and most direct means to improve.