This article, the sixth in a series, builds on the previous exploration and describes some of the interesting principles behind widgets.

Article summary address:

A complete series of articles on Flutter

A series of articles on the world outside Flutter

First we need to understand, what is a Widget? Here’s a “well known” answer: Widgets don’t really render objects. Yes, rendering in Flutter actually goes from Widget to Element to RenderObject.

We all know that widgets are immutable, but how do widgets build frames in immutable form? The Widget needs to be rendered as an Element, but as you can see from the comments below, the Widget is actually just a configuration description of Element that tells the Element how to render its instance.

So what is the correspondence between widgets and Elements? As you can see from the above comment, Widget and Element have a one-to-many relationship. The render tree is actually a tree made up of the nodes of the Element instance, and widgets as configuration files can be reused across multiple parts of the tree, resulting in multiple Element objects.

So what is RenderObject? How does it relate to these two? The RenderObject is the actual render object, and Element holds the RenderObject and the Widget.

Combined with the following figure, the relationship among the three can be roughly summarized as follows: The Widget configuration file generates the Element, then creates a RenderObject to associate with the Element’s internal RenderObject object. Finally, a Flutter is laid out and drawn using the RenderObject data. Theoretically you can also think of the RenderObject as the final rendering data for a Flutter. It holds information such as size and position, and the Flutter uses it to draw the image.

RenderObject: RenderBox: A Render object in A 2D Cartesian coordinate System, as can be seen from the source notes, it implements “Cartesian coordinate system” on the basis of inheriting the layout and rendering functions of RenderObject: To Top, Left as the basis, through the width and height of the two axes to achieve layout and nesting.

RenderBox avoids the hassle of using RenderObject directly, where RenderBox layout and calculation of size are handled in performLayout() and performResize(). Most of the time we prefer to inherit RenderBox to implement customization.

Based on the above, we know that:

  • Widgets are only displayed configurations, so they are relatively lightweight. The widgets are optimized for Flutter, so there is no problem with widgets reconstructing every time their state changes.
  • RenderObject, on the other hand, involves laying out, calculating, drawing, etc., and it would be expensive to recreate everything every time.

So widgets make judgments about whether new Element and RenderObject objects need to be created each time, for example: Use the newWidget to update an existing Element object if the newWidget’s runtimeType and key are equal to the oldWidget’s, or create a new Element from scratch.

The Widget is recreated, and the Element tree and RenderObject tree are not completely recreated.

As an aside, how can we get the size and position of a layout?

The first thing we need to do is use GlobalKey, which we mentioned earlier, to get the BuildContext of the control object, and we know that the BuildContext implementation is Element, which holds the RenderObject. So, what we know about the RenderObject is that we actually get the RenderBox, So with the RenderBox we only have size and position.

  showSizes() {
    RenderBox renderBoxRed = fileListKey.currentContext.findRenderObject();
    print(renderBoxRed.size);
  }

  showPositions() {
    RenderBox renderBoxRed = fileListKey.currentContext.findRenderObject();
    print(renderBoxRed.localToGlobal(Offset.zero));
  }

Copy the code

—

Since then, chapter 6 has finally come to an end! (/ / / del / / /)

Resources to recommend

  • Making: github.com/CarGuo/
  • Open Source Flutter complete project:Github.com/CarGuo/GSYG…
  • Open Source Flutter Multi-case learning project:Github.com/CarGuo/GSYF…
  • Open Source Fluttre Combat Ebook Project:Github.com/CarGuo/GSYF…
Full open source project recommendation:
  • GSYGithubAppWeex
  • GSYGithubApp React Native