Layout & Structure

The Layout System is the structural framework of your application. It defines how widgets are arranged, aligned, and positioned on the screen. Understanding these core concepts is crucial for building responsive and adaptive interfaces.

Core Concepts

Before diving into individual widgets, understand the three main layout models:

1. Box Model (Container & Sized Box): Every widget is a box. You can control its size, padding, and margins.

2. Flex Layout (Row & Column): The most common way to arrange widgets linearly (horizontally or vertically).

3. Stack Layout (Stack & Overlay): Positioning widgets on top of each other, useful for background images or floating badges.

Layout Widgets Catalog

Below are the specific widgets used to implement these concepts:

Container & Spacing

• Container - A versatile box with styling, padding, and dimensions.

• Sized Box - precise control over spacing and fixed dimensions.

Linear & Flow Layouts

• Row & Column - The workhorses of layout; arrange children in a line.

• Wrap - Like a row/column, but wraps to the next line when space runs out.

Layered Layouts

• Stack - Place widgets on top of each other (z-axis).

• Overlay - Float content above the entire application.

Screen Structure

• Scaffold - The standard page layout structure (AppBar, Body, Floating Action Button).

• Safe Area - Avoids system intrusions like the notch or home indicator.

• AppBar - The standard top navigation bar.