Column and Row in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Column widget in Flutter?

A Column widget arranges its child widgets vertically, one below the other, like stacking blocks in a column.

beginner

What does the Row widget do in Flutter?

A Row widget arranges its child widgets horizontally, side by side, like items on a shelf.

intermediate

How do you control the alignment of children inside a Column or Row?

Use properties like mainAxisAlignment to align children along the main axis (vertical for Column, horizontal for Row), and crossAxisAlignment for the opposite axis.

intermediate

What happens if children inside a Row or Column overflow the available space?

If children take more space than available, Flutter shows an overflow error (yellow and black stripes). You can fix this by wrapping children with Expanded or Flexible widgets or using scrolling widgets.

intermediate

Why use Expanded inside a Row or Column?

Expanded tells a child widget to fill the remaining space in the main axis, helping to create flexible layouts that adapt to screen size.

Which widget arranges children vertically in Flutter?

A Container

B Row

C Stack

D Column

The Column widget stacks children vertically, one below the other.

What property controls the main axis alignment in a Row?

A mainAxisAlignment

B crossAxisAlignment

C alignment

D direction

mainAxisAlignment controls how children are placed along the main axis (horizontal for Row).

If children overflow in a Row, what widget can help fix this?

A Text

B Expanded

C Padding

D Scaffold

Expanded lets a child fill available space and prevents overflow.

Which axis is the cross axis in a Column?

A Horizontal

B Vertical

C Diagonal

D None

In a Column, the main axis is vertical, so the cross axis is horizontal.

What will happen if you put multiple children in a Row without constraints and they are too wide?

A They will wrap automatically

B They will be hidden

C Overflow error with yellow-black stripes

D They will stack vertically

Flutter shows an overflow error if children exceed available space in a Row.

Explain how Column and Row widgets arrange their children and how you can control their alignment.

Think about stacking blocks vertically or lining them up horizontally.

Describe what causes overflow errors in Column or Row and how to prevent them.

Imagine trying to fit too many items on a small shelf.