What is difference between Element and RenderObject in Flutter?

Question

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?

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?

Solution

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.