What are Row and Column in Flutter?

Row and Column are two of the most fundamental layout widgets in Flutter. They allow you to arrange other widgets in a horizontal line (Row) or a vertical line (Column). Think of them as simple building blocks that help you create almost any design—from a row of icons to a complex profile screen. Both are based on the Flex widget, which gives them powerful alignment and spacing features.

Basic Usage

Using a Row or Column is straightforward: you give them a list of children, and they place them next to each other. Here are the simplest examples:

DARTRead-only

// Row example: three icons in a horizontal line
Row(
  children: [
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star, color: Colors.yellow),
  ],
)

// Column example: three texts stacked vertically
Column(
  children: [
    Text('Top'),
    Text('Middle'),
    Text('Bottom'),
  ],
)

// Row example: three icons in a horizontal line
Row(
  children: [
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star, color: Colors.yellow),
  ],
)

// Column example: three texts stacked vertically
Column(
  children: [
    Text('Top'),
    Text('Middle'),
    Text('Bottom'),
  ],
)

When you run this, you'll see the icons appear side-by-side, and the texts one above the other. It’s that easy to start arranging widgets!

Key Properties Explained

To control exactly how your children are placed, Row and Column offer several properties. Let’s look at each one with simple explanations:

children: The list of widgets you want to arrange. This is required.
mainAxisAlignment: Controls how the children are spaced along the main axis (the direction of the row/column). For a Row, the main axis is horizontal; for a Column, it’s vertical. Options include:
- MainAxisAlignment.start (default): children are grouped at the beginning.
- MainAxisAlignment.end: children are grouped at the end.
- MainAxisAlignment.center: children are grouped in the middle.
- MainAxisAlignment.spaceBetween: first child at start, last at end, equal space between.
- MainAxisAlignment.spaceAround: equal space around each child.
- MainAxisAlignment.spaceEvenly: equal space between, before, and after each child.
crossAxisAlignment: Controls how children are aligned in the opposite direction (cross axis). For a Row, cross axis is vertical; for a Column, it’s horizontal. Options:
- CrossAxisAlignment.start: align to top (Row) or left (Column).
- CrossAxisAlignment.end: align to bottom (Row) or right (Column).
- CrossAxisAlignment.center (default): center align.
- CrossAxisAlignment.stretch: stretch children to fill the cross axis.
- CrossAxisAlignment.baseline: align children by their text baseline (requires text).
mainAxisSize: Determines how much space the row/column should take. MainAxisSize.max (default) means expand to fill the available space; MainAxisSize.min means shrink to fit the children.
verticalDirection and textDirection: Change the order of children. For example, verticalDirection: VerticalDirection.up stacks children from bottom to top.

Alignment Examples

Let's see these properties in action with a practical example. Here’s a Row that spreads its children evenly and centers them vertically:

DARTRead-only

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 80, color: Colors.green),
    Container(width: 50, height: 30, color: Colors.blue),
  ],
)

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 80, color: Colors.green),
    Container(width: 50, height: 30, color: Colors.blue),
  ],
)

The three containers have different heights, but because crossAxisAlignment is center, they all sit in the middle of the Row's height. And spaceEvenly ensures there's equal horizontal space around each.

Making Children Flexible: Expanded and Flexible

Sometimes you want one child to take all the remaining space, or to share space with others proportionally. That's where Expanded and Flexible come in. Wrap any child with Expanded to make it fill the leftover space along the main axis.

DARTRead-only

Row(
  children: [
    Expanded(
      flex: 2, // takes 2 parts of the free space
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 1, // takes 1 part
      child: Container(color: Colors.green),
    ),
    Container(width: 50, color: Colors.blue), // fixed width, no expansion
  ],
)

Row(
  children: [
    Expanded(
      flex: 2, // takes 2 parts of the free space
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 1, // takes 1 part
      child: Container(color: Colors.green),
    ),
    Container(width: 50, color: Colors.blue), // fixed width, no expansion
  ],
)

In this example, the red container gets twice as much space as the green one, while the blue one keeps its fixed width. The flex property (default 1) determines the proportion of free space each Expanded child receives. Flexible works similarly but allows its child to be smaller if needed (it doesn't force it to fill all the space).

Row vs Column: Which One to Use?

Choosing between Row and Column depends entirely on the direction you need: horizontal or vertical. You can also nest them—for example, a Column can contain Rows, and those Rows can contain Columns. This nesting is how you build complex layouts like grids, cards, and entire screens.

Common Mistakes Beginners Make

Here are a few pitfalls to avoid:

Overflow errors: If your Row or Column has more children than can fit on the screen, you'll see a yellow/black striped area. Fix this by wrapping children that can shrink with Expanded or by using ListView instead.
Confusing mainAxisAlignment and crossAxisAlignment: Always remember: main = direction of the row/column; cross = the other direction. A good mnemonic: Main axis is the direction you're 'main'ly arranging.
Trying to stretch children without constraints: Using CrossAxisAlignment.stretch works only if the Row/Column itself has constraints. If you put a Row inside another unbounded container (like a Column without a fixed height), stretching might not work. Wrap the Row with a SizedBox or Container with a height to fix this.

Key Points to Remember

Row arranges children horizontally, Column vertically.
Use mainAxisAlignment to control spacing along the main axis.
Use crossAxisAlignment to align children along the opposite axis.
Wrap children with Expanded to make them take available space.
mainAxisSize.min makes the Row/Column only as big as its children.
Nest Rows and Columns to create complex layouts.

Common Interview Questions

What's the difference between mainAxisAlignment and crossAxisAlignment?
How does Expanded differ from Flexible? Can you give an example when to use each?
How would you create a layout with two buttons at the bottom of the screen, one on the left and one on the right? (Hint: Use a Row with mainAxisAlignment: spaceBetween inside a Column.)
What happens if a Row has more children than can fit? How do you fix it?
Can you nest a Row inside a Column? Show a real-world scenario.
Explain the flex factor: if you have three Expanded widgets with flex 1, 2, and 3, how much space does each get?

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Row & Column Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Hello, Flutter!'),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Icon(Icons.favorite, color: Colors.red),
                  Icon(Icons.thumb_up, color: Colors.blue),
                  Icon(Icons.share, color: Colors.green),
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

Test Your Knowledge

of 3

What does `mainAxisAlignment` control in a Row?

Vertical alignment of children

Horizontal alignment of children

The order of children

The size of children

of 3

Which widget would you use to make a child of a Row fill the remaining space?

Container

Padding

Expanded

Align

of 3

If you want to add space evenly between, before, and after children in a Column, which `mainAxisAlignment` do you use?

spaceBetween

spaceAround

spaceEvenly

center

// Row example: three icons in a horizontal line Row( children: [ Icon(Icons.star, color: Colors.yellow), Icon(Icons.star, color: Colors.yellow), Icon(Icons.star, color: Colors.yellow), ], ) // Column example: three texts stacked vertically Column( children: [ Text('Top'), Text('Middle'), Text('Bottom'), ], )

Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(width: 50, height: 50, color: Colors.red), Container(width: 50, height: 80, color: Colors.green), Container(width: 50, height: 30, color: Colors.blue), ], )

Row( children: [ Expanded( flex: 2, // takes 2 parts of the free space child: Container(color: Colors.red), ), Expanded( flex: 1, // takes 1 part child: Container(color: Colors.green), ), Container(width: 50, color: Colors.blue), // fixed width, no expansion ], )

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Row & Column Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Hello, Flutter!'),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Icon(Icons.favorite, color: Colors.red),
                  Icon(Icons.thumb_up, color: Colors.blue),
                  Icon(Icons.share, color: Colors.green),
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

Test Your Knowledge

of 3

What does `mainAxisAlignment` control in a Row?

Vertical alignment of children

Horizontal alignment of children

The order of children

The size of children

of 3

Which widget would you use to make a child of a Row fill the remaining space?

Container

Padding

Expanded

Align

of 3

If you want to add space evenly between, before, and after children in a Column, which `mainAxisAlignment` do you use?

spaceBetween

spaceAround

spaceEvenly

center

Flutter Row and Column Widgets Tutorial for Beginners

Flutter Row and Column Widgets Tutorial for Beginners

What are Row and Column in Flutter?

Basic Usage

Key Properties Explained

Alignment Examples

Making Children Flexible: Expanded and Flexible

Row vs Column: Which One to Use?

Common Mistakes Beginners Make

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?

Flutter Row and Column Widgets Tutorial for Beginners

Flutter Row and Column Widgets Tutorial for Beginners

What are Row and Column in Flutter?

Basic Usage

Key Properties Explained

Alignment Examples

Making Children Flexible: Expanded and Flexible

Row vs Column: Which One to Use?

Common Mistakes Beginners Make

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?