Mahmoud Abas, Full-Stack Software Engineer & AI

Operating Systems 2 - Lab 06: State Management, ListViews, and UI Architecture

In the print dialog, choose "Save as PDF" as the destination.

Operating Systems 2 - Lab 6

State Management, ListViews, and UI Architecture

Making the UI react to data, planning multi-screen apps, and displaying dynamic lists

What Is State?

State: The set of mutable variables that your UI depends on.

When state changes, the UI should reflect the new values
Example: in an age calculator, the calculated years, months, and days are state, empty until the user taps Calculate

Three Rules of Rebuilding

Rule 1

reads from a variable

Rule 2

the variable's value changes

Rule 3

setState is called

Widget rebuilds

dart

setState(() {
  userAge = calculateAge(birthDate, today);
});

`StatelessWidget` vs `StatefulWidget`

	`StatelessWidget`	`StatefulWidget`
Can it rebuild itself?	No	Yes
Has `setState()`?	No	Yes
Use when	UI never changes after first build	UI changes from user input or new data

In your IDE: right-click the widget class name, then Convert to StatefulWidget

`setState` in Action

Converting a widget splits it into two classes: the immutable widget and its mutable State object

dart

class _AgeResultWidgetState extends State<AgeResultWidget> {
  UserAge? userAge;

  @override
  Widget build(BuildContext context) {
    return Text('Years: ${userAge?.years ?? 0}');
  }
}

Why does one setState() call update years, months, and days?

All widgets that read the same state variable refresh together on one setState call

Formatting Dates with `intl`

The default DateTime.toString() output is not user-friendly

Add the intl package, then format with DateFormat
Extract formatting into a small utility class rather than nesting it in a button callback

dart

String formatted = DateFormat('d/M/yyyy').format(myDate);
// "5/3/2025"

DateFormat turns a raw DateTime into a readable string.

Planning a Multi-Screen App

Before coding, answer: what is the data source, what libraries are needed, what navigation pattern applies?

Browse courses

Open a course

See modules

See lessons

View lesson pages

Every screen should still split into UI, Business Logic, and Data/Repository layers
Rule: never reduce below three layers, most real apps need all three

UI Layer

widgets, displays data

Business Logic

filters, validates, transforms

Data / Repository

calls API or database

`ListView` Basics

	`Column`	`ListView`
Scrolling	No built-in scroll	Scrolls automatically
`mainAxisAlignment`	Yes	Not available
Large or dynamic item count	Overflow error	Handles any size

The simple constructor takes a fixed children list, best for a small, known number of items

dart

ListView(
  children: [
    Container(height: 60, child: Text('Item 1')),
    Container(height: 60, child: Text('Item 2')),
  ],
)

`ListView.builder`

Best for data-driven lists, only builds the widgets currently visible on screen (lazy loading)

Parameter	Description
`itemCount`	Total number of items
`itemBuilder`	Called once per visible item; receives `context` and `index`

dart

ListView.builder(
  itemCount: courses.length,
  itemBuilder: (context, index) => CourseCard(course: courses[index]),
)

`ListView.separated` and Horizontal Scroll

ListView.separated adds a separatorBuilder between items, for example a Divider
Set scrollDirection: Axis.horizontal for a horizontally scrolling list
Both are still lazy, only visible items are built

dart

ListView.separated(
  itemCount: courses.length,
  itemBuilder: (context, index) => CourseCard(course: courses[index]),
  separatorBuilder: (context, index) => const Divider(),
)

A divider between every item.

dart

ListView(
  scrollDirection: Axis.horizontal,
  children: [...],
)

Same lazy builder, sideways.

Helper Function vs Widget Class

Helper Function

Parent setState called

Header rebuilds

List rebuilds

Footer rebuilds

Widget Class

Only Header's setState called

CoursesHeader rebuilds

Use a widget class when the component has its own state, is reused elsewhere, or is a logically independent section
Use a helper function only for simple, tightly-coupled, non-reusable UI fragments

Key Takeaways

A widget updates only when it reads a variable, that variable changes, and setState is called
StatelessWidget never rebuilds itself; StatefulWidget does, via setState
The intl package formats dates cleanly, wrap it in a small utility class
Every real screen should be planned across UI, Business Logic, and Data/Repository layers before coding
ListView.builder lazily renders only visible items, the standard choice for dynamic or large lists
Prefer widget classes over helper functions for anything reusable or independently stateful, since only they get their own rebuild scope

Open this lesson

Mahmoud AbasLab 06: State Management, ListViews, and UI Architecture

StatelessWidget

StatefulWidget

Can it rebuild itself?

Yes

Has setState()?

Yes

Use when

UI never changes after first build

UI changes from user input or new data

Column

ListView

Scrolling

No built-in scroll

Scrolls automatically

mainAxisAlignment

Yes

Not available

Large or dynamic item count

Overflow error

Handles any size

Parameter

Description

itemCount

Total number of items

itemBuilder

Called once per visible item; receives context and index

State Management, ListViews, and UI Architecture

What Is State?

Three Rules of Rebuilding

StatelessWidget vs StatefulWidget

setState in Action

Formatting Dates with intl

Planning a Multi-Screen App

ListView Basics

ListView.builder

ListView.separated and Horizontal Scroll

Helper Function vs Widget Class

Helper Function

Widget Class

Key Takeaways

Open this lesson

State Management, ListViews, and UI Architecture

What Is State?

Three Rules of Rebuilding

StatelessWidget vs StatefulWidget

setState in Action

Formatting Dates with intl

Planning a Multi-Screen App

ListView Basics

ListView.builder

ListView.separated and Horizontal Scroll

Helper Function vs Widget Class

Helper Function

Widget Class

Key Takeaways

Open this lesson

`StatelessWidget` vs `StatefulWidget`

`setState` in Action

Formatting Dates with `intl`

`ListView` Basics

`ListView.builder`

`ListView.separated` and Horizontal Scroll

`StatelessWidget` vs `StatefulWidget`

`setState` in Action

Formatting Dates with `intl`

`ListView` Basics

`ListView.builder`

`ListView.separated` and Horizontal Scroll