Flutter:- Defining Widgets and Elements

Defining Widgets and Elements:- The Flutter UI is implemented by using widgets from a modernreactive framework. Flutter uses its own rendering engine to draw widgets. Since widgets are the configuration pieces of the UI and together they create the widget tree, how does Flutter use these configurations? Flutter uses the widget as the configuration to build each element, which means the element is the widget that is mounted (rendered) on the screen. In programming, you have different lifecycle events that usually happen in a linear mode, one after another as each stage is completed. In this section, you’ll learn the widget lifecycle events and their purpose. To build the UI, you use two main types of widgets, StatelessWidget and StatefulWidget . A stateless widget is used when the values (state) do not change, and the stateful widget is used when values (state) change.

The StatelessWidget Lifecycle:- A StatelessWidget is built based on its own*configuration and does not change dynamically. For example, the screen displays an image with a description and will not change. The stateless widget is declared with one class. The build (the UI portions) method of the stateless widget can be called from three different scenarios. It can be called the first time the widget is created, when the widget’s parent changes, and when an Inherited Widget has changed.

class HidaseTube extends StatelessWidget {@override Widget build(BuildContext context) {return Container();}}

The StatefulWidget Lifecycle:- A StatefulWidget is built based on its own configuration but can change dynamically. For example, the screen displays an icon with a description, but values can change based on the user’s interaction, like choosing a different icon or description. This type of widget has a mutable state that can change over time. The stateful widget is declared with two classes, the StatefulWidget class and the State class. The StatefulWidget class is rebuilt when the widget’s configuration changes, but the State class can persist (remain), enhancing performance. For example, when the state changes, the widget is rebuilt. If the StatefulWidget is removed from the tree and then inserted back into the tree sometime in the future, a new State object is created.

Class HidaseTube extends StatefulWidget { @override _ HidaseTube createState() => _ HidaseTube State(); } class _ HidaseTube State extends State<HidaseTube > { @override Widget build(BuildContext context) { return Container();}}

You can override different portions of the StatefulWidget to customize and manipulate data at different points of the widget life-cycle. Table 1.1 shows some of the stateful widget main overrides, and the majority of the time you’ll use the initState() , didChangeDependencies() , and dispose() methods. You’ll use the build() method all of the time to build your UI.

0 0 vote
Article Rating

You may also like...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x