RenderObjects?! | Decoding Flutter

[MUSIC PLAYING] JOHN RYAN: Have you ever wanted to use non-Cartesian coordinates? Or maybe you're looking to build a widget that you just can't build using the available widgets. If you've used Flutter, you've probably built a Widget Tree before. You might also know that Flutter creates an Element Tree alongside it, but what do these elements do? They create another tree of render objects called the Render Tree. You're probably most familiar with the Widgets layer, but what about the layer below? This is the Rendering layer, which deals with render objects and the related classes. The Widgets layer uses the Rendering layer, so you don't typically see render objects in your code but they're there. But what do render objects do? Well, quite a bit, actually. They deal with layout, painting, hit testing, and accessibility. You probably already know that everything is a widget in Flutter, but it's also true that everything you see on screen is a render object. To see for yourself, open up the Flutter Inspector and select the Render Tree tab. Most Flutter widgets use a specific type of render object called RenderBox, which uses 2D coordinates. The Element Tree keeps the Render Object Tree in sync with the Widget Tree and continues to exist from frame to frame. Most of the time, the render objects can be reused, which helps improve performance. For example, if the color of a widget changes, the same render object can be reused and repainted. If a widget is removed from the tree, the corresponding element is detached, and so is the corresponding render object. This detaching happens because the render object might actually be moving to a new location in the Widget Tree or swapped with a sibling. This is why it's important to use keys. Flutter uses keys to figure out when a widget has moved to a new location and might be able to reuse the element and render object. For example, when two staple widgets with unique keys are swapped during the build phase, the elements need to be swapped too. The parent element will reuse the child elements if there's a widget with the matching key, in effect swapping the elements and the associated state objects. If you want to move a widget to a completely different part of the tree, you need a global key. For more on keys see our "When To Use Keys" video. To customize the layout and painting of a widget, extend render box or render object and override their methods. Then extend the render object element and render object widget classes if you're using the Widgets layer. But this is a lot of code, so before you get started you should make sure that there's not a way to use widgets instead. If all you're trying to do is paint onto a canvas, try the CustomPaint widget. For more on Flutter's render pipeline, check out the links below and head on over to flutter.dev. [MUSIC PLAYING]

Channel: Flutter

Views: 32,188

Keywords: purpose: Educate, pr_pr: Flutter, series: Decoding Flutter, type: DevByte (deck cleanup 0-10min), GDS: Yes, RenderObjects, how to customize the layout and painting of a widget, render trees, developer tutorials, Flutter, Flutter tutorials, Flutter developers, flutter app development, Flutter course, how Flutter works, Flutter best practices, Decoding Flutter, Google developers, flutter 101, get started with flutter, flutter apps, flutter widgets, build apps with flutter

Id: zmbmrw07qBc

Length: 3min 26sec (206 seconds)

Published: Fri Sep 24 2021