Layouts (Row & Column)

Relax. We'll talk through this in plain words — no textbook voice.

Row and Column are the most fundamental layout tools in Flutter. Row lines up its child widgets side by side, while Column stacks them top to bottom. Deciding what goes horizontal and what goes vertical when building a UI is where layout thinking begins.

dart

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text('Rate this lesson'),
    const SizedBox(height: 12),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Icon(Icons.star, color: Colors.amber, size: 36),
        Icon(Icons.star, color: Colors.amber, size: 36),
        Icon(Icons.star, color: Colors.amber, size: 36),
      ],
    ),
  ],
)

You should see

The text "Rate this lesson" appears in the middle of the screen, with 3 star icons lined up side by side below it.

What's Next

With layout covered, start working with buttons the user can tap.

Easy traps

Putting a long piece of text inside a Row without using Expanded can trigger the yellow/black overflow warning. Use Expanded or Flexible when needed.