Column and Row in Flutter

Introduction

Column and Row help you arrange things on the screen either vertically or horizontally. They make your app look neat and organized.

When you want to stack buttons one on top of another.

When you want to place icons side by side in a toolbar.

When you want to create a list of text items going down the screen.

When you want to create a menu bar with items lined up horizontally.

When you want to mix vertical and horizontal layouts inside your app.

Syntax

Flutter

Column(
  children: [
    Widget1(),
    Widget2(),
    Widget3(),
  ],
)

Row(
  children: [
    Widget1(),
    Widget2(),
    Widget3(),
  ],
)

children is a list of widgets placed inside the Column or Row.

Column arranges widgets vertically, Row arranges them horizontally.

Examples

This puts two text widgets one below the other.

Flutter

Column(
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

This puts two icons side by side.

Flutter

Row(
  children: [
    Icon(Icons.star),
    Icon(Icons.favorite),
  ],
)

This centers the texts vertically inside the available space.

Flutter

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Centered'),
    Text('Text'),
  ],
)

Sample App

This app shows three icons side by side in a row, centered horizontally. Below that, it shows three lines of text stacked vertically in a column.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Column and Row Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.star, color: Colors.orange),
                  SizedBox(width: 10),
                  Icon(Icons.favorite, color: Colors.red),
                  SizedBox(width: 10),
                  Icon(Icons.thumb_up, color: Colors.blue),
                ],
              ),
              SizedBox(height: 20),
              Text('Icons in a Row'),
              SizedBox(height: 40),
              Column(
                children: [
                  Text('Line 1'),
                  Text('Line 2'),
                  Text('Line 3'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Use SizedBox to add space between widgets inside Column or Row.

Use mainAxisAlignment to control how children are placed along the main axis (vertical for Column, horizontal for Row).

Use crossAxisAlignment to control alignment perpendicular to the main axis.

Summary

Column arranges widgets vertically.

Row arranges widgets horizontally.

Both use children list to hold widgets.