Mobile Application

Lecture 3

College of Science Suhail M. Abdulrahman

Computer Science( Stage 4) suhel.Abdulrahman@uoz.edu.krd
 Understanding Flutter Widgets
▪What is a widget?

➢ In Flutter, everything is a widget. Whether it’s a button, a text element, a layout, or even
the entire app, they’re all represented by widgets.

➢ Widgets are organized in a hierarchical structure, meaning they build upon each other to
create the entire user interface of your app.

➢Using widgets is like combining Legos.

➢Like Legos, you can mix and match widgets to create something amazing.
 Understanding Flutter Widgets(cont.)
▪Flutter’s declarative nature makes it super easy to build a UI with widgets.

▪ A widget is a blueprint for displaying your app’s state.

▪State is information that:

1. Can be read synchronously when the widget is built and

2. Might change during the lifetime of the widget.

▪You can think of widgets as a function of UI. Given a state, the build() method of a widget
constructs the widget UI.
 Understanding Flutter Widgets(cont.)
Common Widgets:

➢ Container: A versatile widget that combines common painting, positioning, and sizing properties.

➢ Column: Arranges child widgets vertically in a list.

➢ Row: Arranges child widgets horizontally in a list.

➢ Text: Displays a run of text with a single style.

➢ Image: Displays an image.

➢ ElevatedButton: A Material Design elevated button.

➢ Scaffold: Implements the basic Material Design visual layout structure.

➢ AppBar: Displays content and actions at the top of a screen.

 Understanding Flutter Widgets
Example:
 Understanding Flutter Widgets(cont.)
▪Now, you’ll look in more detail at the widgets that compose the bellow card:
 How Flutter handle states ?
▪ But the important question is how does Flutter represent the changes in different
states of widgets. There are three concepts in Flutter:
➢ Widget tree
➢ Element tree
➢ RenderObject tree
 Widget tree
▪ In Flutter, the widget tree represents the hierarchical structure of widgets that make up
your app’s user interface.

▪ Think of it as a family tree for your UI components, where each widget is a node
connected to its parent and children.

▪ How Is the Widget Tree Constructed?

➢ You build the widget tree using the build method within widget objects.

➢ When a widget’s build method returns more widgets, those new widgets become child
nodes in the tree.

➢ The tree grows as you add more widgets, creating a visual representation of your app’s UI.
 Widget tree
Example:
 Element tree
▪What Is the Element Tree?

➢ In Flutter, the element tree is a dynamic representation of the widget tree.

➢Each element is associated with a single widget, and the element tree is a one-to-one
mapping of widgets to elements.

▪How Does It Work?

➢ When you create a widget, Flutter automatically creates a corresponding element for it.

➢ Elements are lightweight objects that handle the rendering, layout, and interaction of
widgets.
 Element tree
Example:
 Render tree
▪What Is the Rendering Tree?

➢ The render tree is a fundamental part of Flutter’s rendering system.

➢ It represents the final layout of your user interface on the screen.

➢ The render tree is created from the element tree and describes the geometry of UI components.

▪How Does It Work?

➢ When you build a widget tree in Flutter, each widget corresponds to an element.

➢ Elements are lightweight objects that manage the rendering, layout, and interaction of widgets.

➢ The render tree is constructed from these elements during the layout phase.
 (Widget ,Element, Render) trees
▪Example:
ANY QUESTIONS?