Scribd
Upload
17 views14 pages

Lec 3

Uploaded by

shaho hussen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views14 pages

Lec 3

Uploaded by

shaho hussen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Mobile Application

Lecture 3

College of Science Suhail M. Abdulrahman


Computer Science( Stage 4) [email protected]
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?

You might also like