Row and Column

The two workhorses

Almost every screen is built from Rows and Columns nested inside each other. A product card is a Row (image, then text); the text part is a Column (name, price, rating). Once you understand their two axes, most layouts become easy.

Column (main axis: vertical)          Row (main axis: horizontal)
┌───────────────┐                      ┌──────────────────────────┐
│   [ child 1 ] │  ↓ main axis         │ [c1] [c2] [c3]  → main   │
│   [ child 2 ] │                      └──────────────────────────┘
│   [ child 3 ] │  ↔ cross axis           ↕ cross axis
└───────────────┘

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: const [
    Text('Masala dosa'),
    Text('Rs 90'),
  ],
)

crossAxisAlignment options include start, center (default), end and stretch. stretch makes children fill the cross axis, for example full-width buttons in a Column.

A good habit when you look at any design: draw boxes around it. Ask "is this a vertical list of things or a horizontal one?" Mark each group as a Row or a Column, and work from the outside in. A login screen is a Column; inside it, the "Forgot password? Sign up" line is a Row.

Row and Column do not scroll. If their children do not fit, you get an overflow error (topic 4). For content that can be longer than the screen, use a scrolling widget such as ListView or SingleChildScrollView.

mainAxisSize

By default a Column tries to be as tall as its parent allows (mainAxisSize: MainAxisSize.max). Inside a Center, that means the Column fills the screen height and its children sit at the top. MainAxisSize.min makes the Column only as tall as its children, so Center can really centre it.

Spacing between children

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    const TextField(decoration: InputDecoration(labelText: 'Name')),
    const SizedBox(height: 12),          // fixed gap
    const TextField(decoration: InputDecoration(labelText: 'Mobile')),
    const SizedBox(height: 24),
    ElevatedButton(onPressed: () {}, child: const Text('Continue')),
  ],
)

Nesting

Row(
  children: [
    const Icon(Icons.storefront, size: 40),
    const SizedBox(width: 12),
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text('Sharma General Store'),
        Text('Open till 10 pm'),
      ],
    ),
  ],
)

Common mistakes

• Wrapping a Column in Center and wondering why it is still at the top: set mainAxisSize: MainAxisSize.min.
• Too many Rows in a narrow screen: text overflows. See topic 4 for fixes with Expanded and Flexible.
• Using spaceBetween with only one child: nothing visible happens.
• Forgetting that crossAxisAlignment.stretch in a Row needs a bounded height.