Widget

In Flutter, every is widget is easy to understand. The Text we use to display Text, the Image to display images, and the Padding to display position information are all widgets.

While reading the Flutter source, you may notice the definition of the Widget:

@immutable
abstract class Widget extends DiagnosticableTree {...const Widget({ this.key });
  final Key key;
  static bool canUpdate(Widget oldWidget, Widget newWidget) {
  returnoldWidget.runtimeType == newWidget.runtimeType && oldWidget.key == newWidget.key; }... }Copy the code

Officials say:

A widget is an immutable description of part of a user interface.

A widget is an immutable description of a user interface.

All properties ina widget must be final. Once instantiated, internal properties cannot be changed. But in fact, our UI cannot be immutable.

Flutter has three trees, Widget tree, Element tree and RenderObjects tree. These trees have different roles and combine them together to optimize the various possibilities of the UI.

What is the Element

Records the location of a Widget

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

It is the mutable part of the tree that manages UI updates and changes, and you can think of it as an element that manages the widget’s life cycle. Each element references a widget, so it’s easy.

What is the RenderObject

When Flutter draws the UI, it does not look at the Widget’s tree, but at RenderObjects, which controls the size, layout and retains all the logic used to draw the actual Widget. This is why rendering object instantiation performs well.

To better illustrate the three trees, let’s look at the following widget:

class HomeRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Hello world')); }}Copy the code

When we launch the application

1.Flutter traverses your widgets and creates a widget tree. 2. Corresponding to the widget, Flutter creates a tree of elements in which each Element object is created with createElement(). 3. Each render object is created when Element calls createRenderObject().

As shown in the figure:

When changing the value of the Text widget, we look at the information in the Flutter Inspector.

Before the change:

After the changes:

The value displayed in text changes from 4 to 5, and its renderObject does not change.

Because rendering objects in their instantiation is performance-expensive, Flutter preserves this, eliminating the overhead of repeated instantiations. If they are of the same type, there is no need to recreate rendered objects. We just need to update the key value, and we can recreate the render object.

In practice, a page is estimated to have at least dozens of widgets, or perhaps hundreds of widgets, and the corresponding Element and renderObject numbers are also equal. Therefore, recreating the entire tree is very performance consuming. Flutter minimizes performance waste to achieve better UI performance.

reference

  • How Flutter renders Widgets
  • [How Flutter renders Widgets

] (medium.com/manabie/how…).

The article summary

Dart asynchrony and multithreading

Insight into state management –ScopeModel

Learn more about Flutter management –Redux

Detailed explanation of Flutter (iii. In-depth understanding of state management –Provider)

4. Deeper understanding of state management –BLoC

A detailed explanation of Flutter

1, Learn about the Stream

7. Understand the principle of drawing deeply

Detailed explanation of Flutter

Project recommend

  • A cool loading animation library
  • Flutter100 + component usage examples
  • Flutter entry to advanced ebook

The public,