Flutter Analysis and Practice: Practices of High-Performance Dynamic Template Rendering

3.4.1 Why Is the Native Solution Not Applicable to Flutter?

  • match_parent: the size of the current node. Make it as large as the parent node.
  • match_content: the size of the current node. Reduce it to the size of a child node.

3.4.2 Three Trees Widget

RenderObjectElement createElement();RenderObject createRenderObject(BuildContext context); Element RenderObject

void paint(PaintingContext context, Offset offset)
if (child != null)
... context.pushOpacity(offset, _alpha, super.paint);

3.4.3 Flutter Optimization During Layout

Figure 3–14 RelayoutBoundary Optimization

  • parentUsesSize = false: The layout of the parent node does not depend on the size of the current node.
  • sizedByParent = true: The size of the current node is determined by its parent node.
  • constraints.isTight: The value is fixed. The maximum width and height are the same as the minimum ones.
  • parent is not RenderObject: If the parent node is not RenderObject, the parent node does not need to be informed of the changes in the child node layout.
Figure 3–15 Element Update and Optimization

Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
if (child != null) {
if (Widget.canUpdate(child.widget, newWidget)) {
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;

3.4.4 How Can Widgets Be Customized? Design of the First Version

Figure 3–16
Figure 3–17
Figure 3–18 Design of the Second Version

Figure 3–19
  • Widgets that can only be used as leaf nodes, such as Image and Text, which inherit from CustomSingleChildLayout.
  • Widgets that can be configured with multiple child nodes, such as FrameLayout and LinearLayout, which inherit from CustomMultiChildLayout.
  • Widgets of scroll list type, such as ListLayout and PageLayout, which inherit from CustomScrollView.
bool hitTestChildren(HitTestResult result, {Offset position}) { return child?.hitTest(result, position: position) ?? false; }
@override void paint(PaintingContext context, Offset offset) { if (child != null) context.paintChild(child, offset); }
  • Calls the Layout method of all child nodes.
  • If the sizedByParent parameter is set to false, you must set the size of the node.
void performLayout() { assert(callback != null); invokeLayoutCallback(callback); if (child != null) { child.layout(constraints, parentUsesSize: true); size = constraints.constrain(child.size); } else { size = constraints.biggest; }
void performResize() { size = constraints.biggest; } Scheme Comparison

Figure 3–20
Figure 3–21 Known Issues

3.4.5 More Optimization Directions


  1. https://flutter.dev/docs/resources/inside-flutter.
  2. https://www.youtube.com/watch?v=UUfXWzp0-DU.
  3. https://www.youtube.com/watch?v=dkyY9WCGMi0.
  4. https://github.com/flutter/flutter/issues/14330.
  5. https://www.dartlang.org/.
  6. https://mp.weixin.qq.com/s/4s6MaiuW4VoHr7f0SvuQ.
  7. https://github.com/flutter/engine.

Original Source:



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com