Week 2: Widgets, Layout & Styling

1. Stateless vs. Stateful

Every widget you write extends one of two base classes, and the choice between them is the first decision you make for any new widget:

• StatelessWidget — has no mutable state of its own. Given the same constructor arguments, it always builds the same output. Most of your UI should be this by default.
• StatefulWidget — paired with a matching State object that can hold mutable fields and call setState() to trigger a rebuild whenever that state changes.

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Count: $_count', style: const TextStyle(fontSize: 24)),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

setState() does exactly one thing: it tells Flutter "the data this widget's build() depends on has changed, call build() again." Nothing on screen updates from just assigning _count++ alone — the mutation has to happen inside the setState callback, or Flutter never learns a rebuild is needed.

2. Row, Column & Stack

Flutter's layout model is constraint-based, not flow-based like the web: a parent passes down size constraints, a child picks its own size within them, then reports that size back up so the parent can position it. In practice, three widgets cover most layouts:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Column(
      children: const [
        Text('128', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        Text('Followers'),
      ],
    ),
    Column(
      children: const [
        Text('42', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        Text('Following'),
      ],
    ),
  ],
)

Row lays children out horizontally, Column vertically — each has a main axis (the direction it lays children out in) and a cross axis (perpendicular to it), controlled independently with mainAxisAlignment and crossAxisAlignment. Stack is the third core layout widget, for layering children on top of each other (a badge over an avatar, text over an image) using Positioned to place them:

Stack(
  children: [
    const CircleAvatar(radius: 32),
    Positioned(
      right: 0,
      bottom: 0,
      child: Container(
        width: 16,
        height: 16,
        decoration: const BoxDecoration(
          color: Colors.green,
          shape: BoxShape.circle,
        ),
      ),
    ),
  ],
)

Expanded and Flexible solve the same problem flex: 1 solves on the web — telling a child to grow and fill the remaining space along its parent's main axis:

Column(
  children: [
    Container(height: 56, color: Colors.blue),   // fixed-height header
    Expanded(                                     // fills all remaining vertical space
      child: Container(color: Colors.white),
    ),
  ],
)

3. Container & Common Widgets

A handful of widgets show up in almost every screen you'll build from here on:

• Container — a general-purpose box for padding, margin, sizing, background color, borders and decoration, all in one widget
• Padding / SizedBox — dedicated single-purpose widgets for spacing, when a full Container is overkill
• Image — Image.asset() for a bundled file, Image.network() for a remote URL
• Icon — Material or Cupertino icon glyphs, sized and colored like text
• ListView — a scrollable, vertically laid-out list, with ListView.builder() lazily building only the items currently on screen

Container(
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 8)],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const CircleAvatar(radius: 28),
      const SizedBox(height: 8),          // a fixed-size spacer -- no CSS margin here
      const Text('Ada Lovelace', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
      const Text('Mobile Engineer', style: TextStyle(color: Colors.grey)),
    ],
  ),
)

ListView.builder is the equivalent of a virtualized list on the web — for a list with hundreds or thousands of items, only building the widgets currently visible on screen matters enormously for performance:

ListView.builder(
  itemCount: activities.length,
  itemBuilder: (context, index) {
    final activity = activities[index];
    return ListTile(
      leading: const Icon(Icons.check_circle_outline),
      title: Text(activity.title),
    );
  },
)

4. Styling with Theme

There's no CSS file, no class names, no cascade or specificity. Styling is plain Dart objects passed as widget arguments — either inline per-widget, or centrally through a theme:

// Works, but repeats the same TextStyle everywhere it's needed
const Text('Hello', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600));

// Preferred -- defined once in MaterialApp, referenced from any widget
MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    textTheme: const TextTheme(
      titleLarge: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
    ),
  ),
  home: const HomeScreen(),
);

// Reading the current theme from any widget's build method
Text('Hello', style: Theme.of(context).textTheme.titleLarge);

ColorScheme.fromSeed() is the modern Material 3 way to theme an entire app from one seed color — it generates a full, accessible palette (primary, secondary, surface, error, and their "on" text-color counterparts) automatically, rather than you picking every shade by hand. Theme.of(context) is how any widget, anywhere in the tree, reads that app-wide theme back out.

5. Handling Taps

Flutter gives you two levels of touch handling, and which one to reach for depends on whether you want a built-in visual response:

// A built-in button -- styling, ripple effect and touch target all handled
ElevatedButton(
  onPressed: () => debugPrint('tapped'),
  child: const Text('Follow'),
)

// InkWell -- adds Material's ripple effect to any custom widget
InkWell(
  onTap: () => debugPrint('tapped'),
  child: Container(
    padding: const EdgeInsets.all(12),
    child: const Text('Custom tappable row'),
  ),
)

// GestureDetector -- raw touch handling, no visual feedback of its own
GestureDetector(
  onTap: () => debugPrint('tapped'),
  onLongPress: () => debugPrint('long pressed'),
  child: Container(color: Colors.blue, width: 100, height: 100),
)

Reach for a built-in widget like ElevatedButton, IconButton or TextButton whenever a standard Material control fits. Use InkWell when you want a custom-looking tappable area that still gets Material's ripple feedback. Drop to bare GestureDetector only when you need gestures a themed widget doesn't expose, like long-press or drag.

6. Hands-on Exercise

7. Knowledge Check

Four quick questions. Expand each to check your answer.