Lab # 04

Mobile Application Development

Fall 2022

Instructor Bakht Muhammad

Student Name

CMSID

Department Computer Science

Semester 5th
Lesson Set Building Widget Trees and Creating Complex
Mobile Applications
4
Purpose 1. Learn how to build a widget tree for a Flutter application.
2. Understand how to manage parent-child widget relationships.
3. Explore how to nest widgets to create complex user interfaces.
4. Implement best practices for designing maintainable and performant widget
trees.
5. Gain experience using advanced Flutter widgets such as Stack, ListView,
and GridView

Procedure 1. Students should read the Pre-lab Reading assignment before coming to the
lab.
2. Students should complete the Pre-lab Writing assignment before entering
the lab.
3. In the lab, students should complete Labs 4.1 through 4.4 in sequence.
Your instructor will give further instructions on grading and completing the
lab.
4. Students should complete the set of lab tasks before the next lab and get
them checked by their lab instructor.

Contents Pre-requisites Completion Page

Time Number

Pre-lab Reading Assignment - 20 min 3

Pre-lab Writing Assignment Pre-lab Reading 10 min 5

Lab 4

Lab 4.1 Pre-lab reading 30 min 4

Understanding Widgets

Lab 4.2 Awareness of - 6

Lab Tasks Programming

2|Page
PRE-LAB READING ASSIGNMENT

Introduction In Flutter, everything is a widget, and widgets are the building blocks of a
to Widget Flutter application's user interface. The arrangement of widgets in a
Trees hierarchical structure is known as a widget tree.

Each widget represents part of the UI, and Flutter renders this tree onto the
screen. A simple app may have a small widget tree, while a more complex
app might have a deeply nested widget tree with multiple parent-child
relationships.

Understandi Widgets are either stateless or stateful. A stateless widget doesn’t change its
ng Widget state once built, while a stateful widget can update dynamically based on user
Composition interaction or data updates.

A widget tree is composed of parent and child widgets. For example, a

Scaffold widget might be the root of the tree with various child widgets, such
as AppBar, Text, Button, and more.

Building Complex apps are built by creating and nesting widgets within other widgets.
Complex Widgets can be combined to create sophisticated UIs. For example, a Column
User widget can contain several Row widgets, each of which contains Text, Icon, or
Interfaces Button widgets.

As the complexity increases, the widget tree can have several levels of depth,
with each level responsible for different parts of the UI.

Best Practices for Building Complex UIs

 Break down complex UIs: Instead of creating a large, monolithic widget
tree, break the UI into smaller reusable components.
 Maintain clarity: Ensure the widget tree remains readable by separating
logic and UI components. Use functions or separate classes for reusable
widgets.
 Performance optimization: Flutter's rebuild mechanism works efficiently,
but keeping widget trees manageable and avoiding unnecessary
rebuilds helps maintain performance.

3|Page
 Widget Tree Example
Consider the following simple widget tree:
Scaffold(
appBar: AppBar(title: Text("Complex UI Example")),
body: Column(
children: [
Row(
children: [
Icon(Icons.star),
Text("Rating"),
],
),
Row(
children: [
ElevatedButton(onPressed: () {}, child: Text("Press Me")),
],
),
],
),
)

Here, the Scaffold widget is the root of the tree, with an AppBar as its child,
and the Column widget inside the body, which contains two rows with child
widgets like Icon, Text, and Button.

4|Page
PRELAB WRITING ASSIGNMENT

Fill in the 1. In Flutter, the __________ widget is used to define the structure and layout of an
blanks
application’s visual elements.
2. A __________ widget does not maintain any internal state and is immutable
after it's built.
3. A __________ widget allows dynamic updates to the UI based on changes in
state.
4. The __________ widget is commonly used to create a vertical layout of widgets
in Flutter, while the __________ widget is used for horizontal layouts.
5. A __________ widget enables scrolling functionality in a Flutter app, especially
when dealing with a large list of items.

5|Page
 Lab 4.2 Lab Tasks

Task 1: Create a Widget Tree for a Simple UI

 Build a Flutter application with a basic widget tree that includes AppBar, Text, Button,
and Icon widgets.

 Screenshot should be pasted here.

 GitHub Repository link.

Task 2: Build a Complex UI with Nested Widgets

 Create a complex user interface using Column, Row, and Container widgets. Add
interactive elements like buttons and text fields.

 Screenshot should be pasted here.

 GitHub Repository link.

Task 3: Implement a Scrollable ListView

 Design an application that displays a scrollable list of items using the ListView widget.
Customize each item using Card and ListTile widgets.

 Screenshot should be pasted here.

 GitHub Repository link.

Challenge: Refactor the complex UI you built into smaller reusable widgets. Separate each
logical part of the UI into a custom widget and include state management using a
StatefulWidget.

Note: Make sure to upload the code for each task to a GitHub repository. Do not update or
change the repository after the due date. Provide the link to your GitHub repository with each
task submission.

6|Page