Flutter what is Widget, RenderObject, Element, Context.

MorUde Frrr - (Fly Or Not)

A beautiful Flutter game in iOS and Android 

I wrote this article based on my understanding I'm not going to explain deeply because already very good article has been wrote on those topics. We want to learn quickly as our blog title said :D . and also I have added some very important links at the end of the article. You should also check it out for more understanding. 

We are starting from beginner level so when you started to learn flutter, you might be seen word(s) “Widget”, "Element", "BuildContext", "RenderObject" and Etc. So what is Widget? Let’s try to understand Widget quickly ;)

• Widget:

=> In flutter everything is Widget means whatever you have seen on the screen that all are made up by Widget like (AppBar, Text, Buttons, Dropdown, List, Popup, Dialogs and Etc means everything). In other word you can also visualise Widget as visual component of the application.

=> Each Screen in the Flutter arrange Widgets by Widget Tree means child-parent widgets. Widget that wrapped by another Widget that known as parent widget and widget that get wrapping is known as child widget. 

=> There are mainly two types of the Widget, StatelessWidget and StatefullWidget for more information about it Please check my another post.

=> In the Flutter framework, Widget is an immutable description of part of a user interface. 

=> Widget just hold configuration information, Like Opacity widget only holds opacity value either 1 or 0. That’s why we create new widget each time while build method get call. It’s not much expensive.

• RenderObject: 

=> When you create any Widget, then widget itself has only configuration information mean If you create Opacity widget then main work of Opacity widget is to manage 'opacity' property that either 0 or 1. They don't care about it's child. Actually Child is created/Render some where else. That's why we called each time create widget is not more expensive.

=> So we can say Widget is only blue-print, Layout/Rendering has been done some where else.

• Element:

=> Element is nothing but instance of the widget at particular location in Widget tree.

=> When widget created, It inflated into Element. And element get inserted it into the tree at particular location.

=> Widget is immutable but element is mutable property
Most of Elements has single child property like, Container, Opacity, Center etc and Some Elements has multiple children call children property. Like Column, Row, ListView and Etc.

=> Element are created by "createElement()" method

=> For more information about Element and it's life cycle you can check out official document of Element.

• Context:

=> Context is nothing but that indicates location of the widget in widget tree.

=> Each widget in Widget tree has own context, and context is directly attached to state of object.  Attachment is permeant mean context of the widget will not be change in entire life time of the App.

=> Same like widget we can imaging context in Parent/child manner.
Take example If you have Widget tree like Container -> Column -> Text->Button->Image. Here Each Widget in widget tree has own context like Container has it's own context. Column has it's own context... same for others. And context is permanent for it's widget.

=> In above  example Container widget known as Parent widget in Widget tree and others are child widgets. So same We can imagine Context of Container widget also know as Parent context and others are child context.

That's it, If you want to learn more about all the above topics you can go with below links.

1) Nice article wrote by Didier Boelens  you can check out below link

=> https://www.didierboelens.com/2018/06/widget---state---context---inheritedwidget/

2) For element, renderObject very deeply and clear explained by Norbert, checkout link

=> https://medium.com/flutter-community/flutter-what-are-widgets-renderobjects-and-elements-630a57d05208