TopolearnEvery screen is a combination of these few layout widgets.
Flutter layout is done with widgets, not a separate style language.
- `Column` stacks children vertically, `Row` horizontally.
mainAxisAlignmentpositions children along the main axis (start,center,spaceBetween,spaceEvenly...),crossAxisAlignmentalong the other.mainAxisSize: MainAxisSize.minshrinks the Row/Column to fit its children. - `Padding` adds space inside, with
EdgeInsets.all(8),.symmetric(horizontal: 16)or.only(top: 4). - `SizedBox` gives a fixed size, and
SizedBox(height: 12)is the idiomatic spacer.RowandColumnalso accept aspacing:parameter (Flutter 3.27+) to space children evenly. - `Center` and `Align` position a single child.
- `Container` combines padding, margin, size, color, decoration (borders, rounded corners, shadows via
BoxDecoration) and alignment. Use the specific widget when you only need one of these. - `Stack` layers children on top of each other;
Positionedplaces a child at offsets inside it, which is useful for badges and overlays. - `Expanded` inside a Row or Column makes a child take the remaining space (covered with constraints next).
Turn on the Widget Inspector in DevTools or your IDE to see each widget's bounds; "Show guidelines" makes padding and alignment visible.
When a Row's children are too wide, you get the yellow-and-black overflow stripes — a sign to wrap a child in Expanded or Flexible, or make it scroll.
Example
import 'package:flutter/material.dart';
class MessageTile extends StatelessWidget {
const MessageTile({super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
spacing: 12,
children: [
Stack(children: [
const CircleAvatar(radius: 24, child: Text('A')),
Positioned(right: 0, top: 0, child: Container(width: 12, height: 12,
decoration: const BoxDecoration(color: Colors.green, shape: BoxShape.circle),
)),
]),
const Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text('Ana', style: TextStyle(fontWeight: FontWeight.bold)),
Text('See you at 6?'),
]),
],
),
);
}
}Remember
- Column/Row lay out along a main axis; set main and cross alignment
- Padding, SizedBox, Center, Align for spacing and placement
- Stack + Positioned for overlays
Watch out for
- Using Container for everything — specific widgets like Padding and SizedBox are clearer.