Mahmoud Abas, Full-Stack Software Engineer & AI

Operating Systems 2 - Lab: Flutter UI Basics, Layouts, and Code Organization

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

Operating Systems 2 - Lab 3

Flutter UI Basics, Layouts, and Code Organization

Debugging habits, images, StatelessWidget structure, and core layout widgets

Debugging and Self-Learning

Build the habit of investigating errors yourself rather than getting stuck
IDE error highlighting shows a tooltip explaining the exact issue on hover
If the tooltip doesn't solve it, copy the error text and search it, StackOverflow and search engines save real time

dart

// ERROR: Missing comma between properties
Container(
  color: Colors.blue
  width: 100, // IDE highlights this line
)

Spot the bug

dart

// FIXED: Added the missing comma
Container(
  color: Colors.blue,
  width: 100,
)

Hovering the error shows Expected to find ','. Add the missing comma.

MaterialApp and Scaffold

MaterialApp: Wraps the whole app, providing default styling, theming, and navigation

Scaffold: Provides the standard screen structure: app bar, body, floating action button

dart

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('My First App')),
    body: Center(child: Text('Hello, Flutter!')),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ),
)

Adding Images

Image.network loads an image from a URL, with optional width/height
Image.asset loads a local image bundled with the project
Local assets must be registered in pubspec.yaml under the assets section before they'll load

yaml

flutter:
  assets:
    - images/logo.png

Organizing Code with StatelessWidget

A single giant widget tree in one file quickly becomes unmanageable
Extract parts of the UI into custom classes that extend StatelessWidget
Every StatelessWidget implements a build method that returns its widget tree
Best practice: one screen or major widget per `.dart` file, imported into main.dart

main.dart

MaterialApp

home: HomeScreen

imports

home_screen.dart

extends

StatelessWidget

build returns

Scaffold

Body widgets

Margin vs Padding

Margin: Space between a widget's outer border and whatever surrounds it

Padding: Space between a widget's inner border and its child content

Margin

space outside the border

Padding

space inside the border

Child widget

Use the standalone Padding widget when you need spacing without color or borders
Center explicitly centers a child inside its parent

dart

Container(
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(16),
  child: Text('I have margin and padding!'),
)

Row and Column

`Row`

Lays children out horizontally
Main axis horizontal, cross axis vertical

dart

Row(
  children: [
    Icon(Icons.star, color: Colors.amber),
    Icon(Icons.star, color: Colors.amber),
    Icon(Icons.star_border, color: Colors.amber),
  ],
)

`Column`

Lays children out vertically
Main axis vertical, cross axis horizontal

Both accept a children list, unlike Container which takes only one child

Alignment Properties

mainAxisAlignment controls spacing along the primary axis
crossAxisAlignment controls alignment along the secondary axis

Value	Effect
`MainAxisAlignment.start`	Pack children at the start (default)
`MainAxisAlignment.center`	Center children along the axis
`MainAxisAlignment.end`	Pack children at the end
`MainAxisAlignment.spaceBetween`	Equal space between children, no space at edges
`MainAxisAlignment.spaceEvenly`	Equal space between and around children
`MainAxisAlignment.spaceAround`	Half space at edges, full space between

Safe Area

Modern devices have notches and status bars that can overlap your UI
Wrap the main layout in SafeArea to automatically add the padding needed to avoid them

Key Takeaways

Read error messages carefully and search them, don't guess when debugging
MaterialApp + Scaffold form the standard screen skeleton; images load via Image.network or Image.asset
Extract UI into StatelessWidget classes, one per file, to keep code maintainable
Margin is space outside a widget's border, padding is space inside it
Row and Column arrange multiple children; mainAxisAlignment/crossAxisAlignment control their spacing
SafeArea keeps content clear of notches and system UI

Open this lesson

Mahmoud AbasLab: Flutter UI Basics, Layouts, and Code Organization

MaterialApp( home: Scaffold( appBar: AppBar(title: Text('My First App')), body: Center(child: Text('Hello, Flutter!')), floatingActionButton: FloatingActionButton( onPressed: () {}, child: Icon(Icons.add), ), ), )

Value

Effect

MainAxisAlignment.start

Pack children at the start (default)

MainAxisAlignment.center

Center children along the axis

MainAxisAlignment.end

Pack children at the end

MainAxisAlignment.spaceBetween

Equal space between children, no space at edges

MainAxisAlignment.spaceEvenly

Equal space between and around children

MainAxisAlignment.spaceAround

Half space at edges, full space between