Theory
Four widgets in a heap
Last lesson built the card's pieces: poster, title, star, button. Dropped into a bare Column they sit flush against the screen edges, glued to each other, title jammed left: a heap, not a card.
Everything wrong with it is ARRANGEMENT: spacing, alignment, framing: the province of the invisible widgets. Six of them carry the syllabus, and one of the six is an old Android friend wearing a new name.
Theory
Column and Row: the axis pair
Column(children: [...]) stacks children vertically; Row(...) lines them horizontally: Unit 1's LinearLayout, split into 2 honest widgets.
Their shared properties speak in axes:
- mainAxisAlignment: along the direction:
MainAxisAlignment.center,.spaceBetween,.spaceEvenly - crossAxisAlignment: across it: a Column's cross axis is horizontal
So a Column with crossAxisAlignment: CrossAxisAlignment.start left-aligns its children; a Row with mainAxisAlignment: MainAxisAlignment.spaceEvenly spreads its buttons like a toolbar.
Theory
Center, Padding, Scaffold
Center(child:): one child, centred both ways: the quickest dignity a lone widget can receive.
Padding(padding: EdgeInsets.all(16), child:): breathing space, measured by EdgeInsets: .all(16) everywhere, .symmetric(horizontal: 24), .only(left: 8): space in Flutter is a WIDGET wrapping another, not a property scribbled on one.
Scaffold: the screen's skeleton with named slots: appBar: AppBar(title: Text(...)), body:, floatingActionButton:: every proper screen starts as a Scaffold, which is why it has framed every example since the first.
Practical
The booking screen, properly arranged
Scaffold(
appBar: AppBar(title: const Text('FestConnect')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack( // overlap: FrameLayout's twin
children: [
Image.asset('assets/garba.png', height: 180),
Positioned( // pin within the Stack
top: 8,
right: 8,
child: Container(
color: Colors.red,
padding: const EdgeInsets.all(4),
child: const Text('SOLD OUT',
style: TextStyle(color: Colors.white)),
),
),
],
),
const Text('Garba Night',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text('Main Ground, 7:30 pm'),
Icon(Icons.star, color: Colors.amber),
],
),
],
),
),
)
Quiz
Which Unit 1 Android container is Flutter's Stack the direct twin of, and what rule do they share?
- LinearLayout: children in a line
- FrameLayout: children overlap in one frame, the LAST child drawn on top
- ScrollView: one child, scrolling
- TabLayout: children behind tabs
Show the answer
FrameLayout: children overlap in one frame, the LAST child drawn on top
Stack IS FrameLayout with a Dart passport: children occupy the same frame, painted in list order, so the last child sits on top: which is why the listing's SOLD OUT badge, listed after the poster, paints over it. Even the positioning rhymes: Android's layout_gravity becomes Flutter's Positioned(top:, right:) pinning a child within the Stack. LinearLayout's twins are Row and Column; ScrollView's is SingleChildScrollView. Recognising these twins is the honest shortcut through Flutter: you learned these layouts once already, in XML.
Think first
The yellow-and-black stripes
A Row holds the poster thumbnail plus a long event title, and on a narrow phone the app paints yellow-black warning stripes at the Row's right edge. Diagnose what happened and name the standard cure, before tapping.
Show the answer
Overflow: the Row's children demanded more width than the screen owns, and Flutter, rather than silently clipping (Unit 1's ScrollView lesson remembers), paints the hazard stripes in debug builds and tells you by exactly how many pixels. The standard cure: wrap the flexible child in Expanded: Expanded(child: Text(title)): which grants it the leftover space and lets the text wrap or ellipsize inside it. Diagnosis habit: stripes = someone in a Row/Column wants more room than exists = find who should flex, wrap in Expanded.
Watch out
Arrangement slips
Main vs cross axis: a Column's mainAxisAlignment moves things VERTICALLY; students expecting horizontal centring want its crossAxisAlignment: name the axis before reaching for the property.
Padding as a property: there is no padding: on Text; Padding is a WRAPPER widget with an EdgeInsets.
Scaffold-less screens: skipping Scaffold loses the app bar, background and floating-button slots and breaks many Material widgets' assumptions: screens start at Scaffold, always.
Theory
Read trees like an architect
Practise reading the listing outside-in: Scaffold frames, Padding breathes, Column stacks, Stack overlaps, leaves show: every Flutter screen ever is that sentence with different nouns. And notice the twins mapping is now complete for Unit 1's containers: LinearLayout = Row/Column, FrameLayout = Stack, ScrollView = SingleChildScrollView. Next lesson descends into the 2 text widgets: Text's fine print and TextField, where typing meets state.
Summary
Key takeaways
- Column stacks vertically, Row horizontally: mainAxisAlignment along, crossAxisAlignment across.
- Center centres one child; Padding wraps space via EdgeInsets (.all, .symmetric, .only).
- Scaffold is the screen skeleton: appBar, body, floatingActionButton named slots.
- Stack overlaps children (last on top) with Positioned pinning: FrameLayout's direct twin.
- Overflow paints yellow-black stripes; Expanded gives a child the flexible leftover space.
- Space and alignment are WIDGETS wrapping widgets, not properties.
- Memory hook: frame, breathe, stack, line, centre: arrangement is invisible work.