Layout Fundamentals — Flutter Course

What you'll learn

Translate designs into resilient layouts using constraints, flex widgets, stacks, alignment, and reliable overflow diagnosis. The lesson turns the APIs into a repeatable engineering workflow instead of a collection of isolated snippets.

By the end of this lesson, you'll be able to:

Apply Box constraints in a production-shaped Flutter feature
Apply Row and Column in a production-shaped Flutter feature
Apply Expanded and Flexible in a production-shaped Flutter feature
Apply Sizing and alignment in a production-shaped Flutter feature

Core mental model

Connect each API to the decision it supports. Flutter code stays maintainable when state, ownership, lifecycle, and platform boundaries are explicit.

Concept	What it means	Decision rule
Flex	Row and Column distribute space along a main axis	Use Flexible or Expanded only when remaining bounded space should be negotiated
Wrap	Children flow onto additional runs when space is exhausted	Use for chips and actions that may not fit one row
Stack	Children overlap within one layout box	Use for deliberate layering, not to escape normal document flow

Professional workflow

Work in small vertical slices and keep behavior observable from the first iteration.

Define the constraint-driven course card boundary: user goal, inputs, visible states, ownership, and expected failures.
Build the smallest working vertical slice with typed data and explicit dependencies.
Represent loading, empty, success, and failure behavior where the feature can encounter them.
Verify logic away from the UI, then exercise the rendered behavior at its public boundary.
Inspect lifecycle, accessibility, performance, security, and platform behavior before widening the feature.
Refactor only after behavior is protected by repeatable evidence.

Protect the frame

Keep build methods predictable, move side effects to explicit owners, and measure before introducing caches, isolates, or architectural layers.

Guided Flutter lab

Build a focused constraint-driven course card slice

This compact example keeps the important ownership and data-flow decisions visible so the behavior is easy to extend and test.

lib/course_card.dart

class CourseCard extends StatelessWidget {
  const CourseCard({super.key, required this.title, required this.topics});
  final String title;
  final List<String> topics;

  @override
  Widget build(BuildContext context) => Card(
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Text(title, style: Theme.of(context).textTheme.titleLarge),
        const SizedBox(height: 12),
        Wrap(spacing: 8, runSpacing: 8, children: [
          for (final topic in topics) Chip(label: Text(topic)),
        ]),
      ]),
    ),
  );
}

Production practice

Contract

Define the constraint-driven course card inputs, outputs, owner, lifecycle, visible states, and platform assumptions before selecting APIs or packages.

Verification

Protect pure rules with unit tests and the rendered public contract with widget or integration evidence; include one unavailable or failure case.

Operations

Keep dependencies replaceable, log actionable context without user secrets, and measure user-visible behavior before optimizing.

Common failure mode

Hard-coding screen coordinates can match one screenshot while failing with text scaling, localization, keyboard insets, and other window sizes.

Independent workshop

Extend the guided lab into a review-ready constraint-driven course card feature that fits the running course portfolio app.

Your finished workshop must include:

Box constraints
Row and Column
Expanded and Flexible
Sizing and alignment
Stack
Automated verification and a short design note

Definition of done

Demonstrate the happy path, an empty or unavailable state, and at least one failure path. Add an automated check and a short note explaining one design decision.

Recap & quick check

Key takeaways

Flex: Use Flexible or Expanded only when remaining bounded space should be negotiated
Wrap: Use for chips and actions that may not fit one row
Stack: Use for deliberate layering, not to escape normal document flow

Quick check

1. Which rule best applies to Flex?

2. Which rule best applies to Wrap?

3. Which rule best applies to Stack?

Next: Styling, Themes & Assets