CODEWITHSUNDEEP
flutterwidgetelement
Minh Nguyen
Minh Nguyen

Reputation: 421

What is difference between Element and RenderObject in Flutter?

I am confusing between Widget and Element and RenderObject in Flutter. As I know, UI displayed on the screen is Element, a Widget is only a blueprint.

The document says: An Element is an instantiation of a Widget at a particular location in the tree. So, A Widget is a Dart class and an Element is an instance of this class, right?

So, Can I imagine them like the image below?

Widget and Element

But, I read this article and I see UI displayed on the screen is RenderObject, not Element.So, I am confusing between Widget and Element and RenderObject. The real Lamborghini on my image is RenderObject or Element?

Widget and RenderObject

Upvotes: 3

Views: 1316

Answers (2)

mako
mako

Reputation: 1303

RenderObjects are closer to the direct rendering and hit testing for pointer events, but that left me with the question of what Elements are doing at all, why not do away with the Element tree and just do everything with RenderObjects?

Apparently some elements, ComponentElements, don't really produce a RenderObject.

This section is all I was able to find in the documentation. It sounds like the Element tree (for some reason?) tends to end up with a lot of extra parts, and layout is faster if it can just be done on the RenderObject tree. It seems like there's some additional type information in the RenderObject tree as well.

To me that just sounds like another argument against the existence of the Element tree, and the separation of concerns argument just seems probably false, given that elements seem to just end up not containing a lot of functionality to begin with, and due to the extent to which the functionality of the Element and the RenderObject tend to overlap. On the whole, I think flutter might have gotten this wrong, but I'm not sure.

Upvotes: 0

starriet 차주녕
starriet 차주녕

Reputation: 3918

So, A Widget is a Dart class and an Element is an instance of this class, right?

Well, Widget and Element are both Dart classes.

When the Doc says 'instantiation', it didn't mean making an instance from a class.

It means, as you mentioned, Widget is some kind of a blueprint(hold some information), and Element is some other stuff that's made from the corresponding Widget.

Widget makes Element, and that Element makes RenderObject (by using Widget's method).

And RenderObject is the actual thing that is used for rendering stuff onto the screen.

The real Lamborghini on my image is RenderObject or Element?

So, the Lamborghini on your image is made from RenderObject, of course Widget and Element are also used behind the scenes.

Upvotes: 2

Related Questions