Mahmoud Abas, Full-Stack Software Engineer & AI

Operating Systems 2 - Lab 05: Building a Complete Flutter App - Architecture to Logic

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

Operating Systems II - Lab 05

Building a Complete Flutter App: Architecture to Logic

Planning, three-layer architecture, theming, data models, and the logic layer

The Three-Layer Architecture

UI Layer

Widgets, screens, user interactions, visual calculations

Business Logic Layer

Date processing, search logic, calculations

Data Layer

Models, classes, and external data sources

Planning: Requirements First

The first step in building any app is not opening the code editor, it is defining what the app needs to do
Requirements specify user actions, visual elements, and the data the app must access

For each screen, identify what the user sees
For each screen, identify what the user can do
For each screen, identify what data is needed
Categorize every requirement into UI, Business Logic, or Data before writing code

The DRY Principle

DRY: Don't Repeat Yourself. If changing something means editing it in more than one place, the code is poorly organized.

Well-written code lets you make a change in exactly one place

dart

Container(color: Color(0xFF1565C0), child: Text('Header')),
Container(color: Color(0xFF1565C0), child: Text('Section')),
Container(color: Color(0xFF1565C0), child: Text('Footer')),

Anti-pattern: the same color hardcoded on every widget

dart

// DRY - color defined once, reused everywhere
final primaryColor = Color(0xFF1565C0);
Container(color: primaryColor, child: Text('Header')),
Container(color: primaryColor, child: Text('Footer')),

DRY: color defined once, reused everywhere

Centralized Theming

Hardcoding the same color on every widget makes global updates, like dark mode, painful
Define design properties once in ThemeData, attached to MaterialApp
Widgets read from the theme via Theme.of(context) instead of a hardcoded value

dart

Container(
  color: Theme.of(context).primaryColor,
  child: Text('Hello', style: TextStyle(color: Theme.of(context).colorScheme.onPrimary)),
)

Dark Mode in One Line

With centralized theming, switching the whole app to dark mode is a single property change
No widget code needs to change, every widget already reads from the shared theme

dart

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.dark,
)

Fixing Screen Overflow

Designs that fit a development device can overflow on smaller screens, producing a visible overflow error

Approach	When to Use
`SingleChildScrollView`	Wraps a `Column`; content stays full size and the user scrolls to reach all of it
`ListView`	Replaces the `Column` outright; scrolls natively, best for repeating items
`Expanded`	Content shrinks and adapts to fit instead of scrolling

UI Data Models

Data Model: A Dart class that groups related values instead of passing loose variables around.

Fields are typically final, set once via the constructor
Widgets accept the model as a strictly typed parameter and read from it

dart

class PersonModel {
  final String name;
  final int age;
  final DateTime birthDate;
  PersonModel({required this.name, required this.age, required this.birthDate});
}

The Logic Layer

Logic layer code performs calculations completely separated from the UI
A widget must receive exactly the data type it expects, Dart enforces this at compile time
The build method only displays results; it never performs the calculation itself

dart

int calculateDaysAlive() {
  final today = DateTime.now();
  return today.difference(person.birthDate).inDays;
}

Using Packages from pub.dev

Before writing custom logic, ask: does a ready-made package already solve this?
Search pub.dev for relevant keywords, then check popularity, maintenance status, and license
A dependency means one package relies on another, flutter pub get resolves them automatically

yaml

dependencies:
  intl: ^0.19.0

Isolating Logic Classes

Pure Logic Class: No widgets, no UI, no BuildContext, just inputs and calculations.

This makes them independently verifiable, without running the full app

dart

class DaysCalculator {
  final DateTime birthDate;
  DaysCalculator(this.birthDate);
  int calculateDaysAlive() => DateTime.now().difference(birthDate).inDays;
  bool isOver1000DaysOld() => calculateDaysAlive() > 1000;
}

StatefulWidget and setState Basics

State: Any data that changes over time and should trigger a UI update.

A StatelessWidget never changes after build; a StatefulWidget can, via setState
Calling setState tells Flutter: data changed, rebuild this widget with the new values

User Taps Calculate

UI Reads State

Build Data Model

Logic Returns a Result

setState Updates the UI

Key Takeaways

Every production Flutter screen should separate UI, Business Logic, and Data, UI never touches Data directly
Define requirements before writing code, and apply DRY so each change happens in exactly one place
Centralized theming via ThemeData and Theme.of(context) makes global changes, like dark mode, a one-line edit
SingleChildScrollView, ListView, and Expanded each solve screen-overflow differently
Data models are typed Dart classes; the Logic layer performs calculations and can be isolated and verified independently
StatefulWidget plus setState is what makes a Flutter UI react to changing data

Open this lesson

Mahmoud AbasLab 05: Building a Complete Flutter App - Architecture to Logic

Approach

When to Use

SingleChildScrollView

Wraps a Column; content stays full size and the user scrolls to reach all of it

ListView

Replaces the Column outright; scrolls natively, best for repeating items

Expanded

Content shrinks and adapts to fit instead of scrolling

class DaysCalculator { final DateTime birthDate; DaysCalculator(this.birthDate); int calculateDaysAlive() => DateTime.now().difference(birthDate).inDays; bool isOver1000DaysOld() => calculateDaysAlive() > 1000; }