StatefulWidget in flutter arabic | BuildContext شرح عربي
#sec_it_developers
#flutter_course_in_arabic
our community
facebook page : https://bit.ly/3vtKu2h
facebook group : https://bit.ly/3vtKIGF
facebook profile : https://bit.ly/3wN6xT7
telegram channel : https://bit.ly/2TJBlVO
BuildContext
In Flutter, everything is a widget
Widget tree is a structure that represents how our widgets are organized.
Web pages have a DOM and Flutter have a Widget Tree.
Flutter also uses a declarative UI approach, it means that the interface represents the state of the app.
At any given moment, your Flutter app will consist of many widgets, which are related via a tree structure. This isn't unlike the DOM in the web-browser, which organizes HTML elements in a tree of sorts. Not only is the widget tree an actual data structure built by the framework, its also a useful way to talk about your Flutter app.
The following diagram shows what the widget tree for the counter app might look like. (Note that the counter app is the starter app that's generated when you run flutter create in your terminal.)
In general, you build the widget tree via the build method in widget objects. Every time a build method returns more widgets, those widgets all become nodes in the tree. When a user is interacting with your application, Flutter uses this tree structure to represent your app's widgets. When a user navigates to a new screen, Flutter will remove all the widgets in the tree that are no longer used (from the screen they navigated away from) and replace them with widgets that represent the new page.
As we know, the user interface of an application when it is designed in Flutter contains a set of widgets. So that means the whole application is set to be made out of widgets. A widget describes what the view of the app would look like in the given state.
Now, as the user interface contains several widgets, those several widgets are combined to form a widget tree. Now, to each widget that the user creates, an element is created simultaneously by the flutter framework, so now these elements when combined will be called an element tree.
So that means that the widget tree has all the widget configuration and the element tree has all rendered widgets on the screen. There is one more tree named render tree, but the user doesn’t have to interact with it. Render tree is basically a low-level layout, painting system that inherits from the render objects. You won’t need to inherit directly to the render tree, and you will be interacting with the widgets.
Now the widget tree can also be divided into 2 small trees depending on what widget the user has chosen for their code.
Stateless widget tree