Mahmoud Abas, Full-Stack Software Engineer & AI

Operating Systems 2 - Lab: Advanced UI Layouts, Space Management, and Code Organization

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

Operating Systems 2 - Lab 4

Advanced UI Layouts, Space Management, and Code Organization

Combining Row and Column, Expanded vs Flexible, and separating data from UI

Combining Row and Column

A very common pattern: put an icon above text inside a Column, then place several of those columns inside a Row
This is how bottom-navigation-style bars (icon + label) are typically built
Building blocks: Row for horizontal placement, Column for vertical placement, combined for grids of items

dart

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Column(children: [Icon(Icons.home), Text('Home')]),
    Column(children: [Icon(Icons.search), Text('Search')]),
  ],
)

Reusable Custom Widgets

Repeating the same widget combination is a sign to extract a reusable component
Pass parameters (icon, label, etc.) so one widget class renders many variations
This removes duplication and keeps the UI tree easy to read

dart

class NavItem extends StatelessWidget {
  final IconData icon;
  final String label;
  const NavItem({required this.icon, required this.label});

  @override
  Widget build(BuildContext context) {
    return Column(children: [Icon(icon), Text(label)]);
  }
}

One NavItem class replaces three copy-pasted Columns.

Row

NavItem

icon: home

NavItem

icon: search

NavItem

icon: person

The Expanded Widget

Expanded: Used inside a Row or Column to force a child to fill all remaining available space.

Ideal when fixed-size elements (icons) sit beside content that should stretch (text)

dart

Row(
  children: [
    Icon(Icons.label),
    Expanded(child: Text('Stretches to fill the rest')),
    Icon(Icons.arrow_forward),
  ],
)

The Flexible Widget

Allocates space proportionally using a flex value: the system sums all flex values and divides space by ratio
Three sections with flex 7, 1, 2 (total 10) get 70%, 10%, and 20% of the space respectively
Unlike Expanded, a Flexible child can end up smaller than its share if it doesn't need the full space

dart

Column(
  children: [
    Flexible(flex: 7, child: Container(color: Colors.blue[100])),
    Flexible(flex: 1, child: Container(color: Colors.grey[300])),
    Flexible(flex: 2, child: Container(color: Colors.green[100])),
  ],
)

Flexible flex: 7

70%

Flexible flex: 1

10%

Flexible flex: 2

20%

Expanded vs Flexible

Widget	Behavior
`Expanded`	Always fills all remaining space (equivalent to `Flexible` with a tight fit)
`Flexible`	Takes up to its proportional share; the child may render smaller

Organizing UI into Sections

Cramming an entire screen into one build method makes it hard to read and maintain
Divide the screen into logical sections (image header, title, buttons, description)
Extract each section into its own custom widget so the main page reads like an outline

dart

Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [ImageSection(), TitleSection(), DescriptionSection()],
    ),
  );
}

Main Page

ImageSection

TitleSection

DescriptionSection

Separating Data from UI

Hardcoding text and values directly into widgets doesn't scale
Define a Data Model: a plain class holding fields like name, description, price
Widgets accept a model instance instead of raw strings, so the UI dynamically renders whatever data it receives

dart

class Product {
  final String name;
  final double price;
  const Product({required this.name, required this.price});
}

Practice Assignment

Map out the target screen into logical sections before writing any code
Use Row and Column to build the basic structure
Apply Expanded and Flexible so the screen scales across devices
Separate each section into its own independent custom widget

Key Takeaways

Nesting Column inside Row (or vice versa) builds grid-like, icon+label layouts
Repeated widget combinations should become parameterized, reusable custom widgets
Expanded fills all remaining space; Flexible allocates space proportionally and can shrink
Break large screens into section widgets instead of one giant build method
Data models separate raw data from the UI, letting the same widget render any matching data instance

Open this lesson

Mahmoud AbasLab: Advanced UI Layouts, Space Management, and Code Organization

class NavItem extends StatelessWidget { final IconData icon; final String label; const NavItem({required this.icon, required this.label}); @override Widget build(BuildContext context) { return Column(children: [Icon(icon), Text(label)]); } }

Column( children: [ Flexible(flex: 7, child: Container(color: Colors.blue[100])), Flexible(flex: 1, child: Container(color: Colors.grey[300])), Flexible(flex: 2, child: Container(color: Colors.green[100])), ], )

Widget

Behavior

Expanded

Always fills all remaining space (equivalent to Flexible with a tight fit)

Flexible

Takes up to its proportional share; the child may render smaller