What is Column in Flutter: Explanation and Example

In Flutter, a Column is a widget that arranges its child widgets vertically in a single column. It helps you stack widgets from top to bottom inside your app's user interface.

How It Works

Think of a Column as a vertical stack of boxes, where each box is a widget like text, buttons, or images. The Column places these boxes one below the other, starting from the top. It sizes itself to fit its children vertically and stretches horizontally by default.

Just like stacking books on a shelf, the Column keeps each widget in order, so the first child is at the top and the last child is at the bottom. You can control how the children align horizontally and vertically inside the column using properties like mainAxisAlignment and crossAxisAlignment.

Example

This example shows a simple Column with three text widgets stacked vertically.

dart

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 Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('First Line'),
              Text('Second Line'),
              Text('Third Line'),
            ],
          ),
        ),
      ),
    );
  }
}

Output

A screen with an app bar titled 'Column Example' and three lines of text stacked vertically in the center: 'First Line', 'Second Line', 'Third Line'.

When to Use

Use a Column when you want to arrange multiple widgets vertically in your app. It is perfect for creating forms, lists of buttons, or any UI where elements should appear one on top of another.

For example, you might use a Column to stack a title, an image, and a description in a profile screen. It helps keep your layout organized and easy to read.

Key Points

• Column arranges children vertically.
• Children are placed from top to bottom in order.
• Use mainAxisAlignment to control vertical spacing.
• Use crossAxisAlignment to control horizontal alignment.
• It expands vertically to fit children but can be constrained by parent widgets.

Key Takeaways

Column stacks widgets vertically in the order they are listed.

Use mainAxisAlignment and crossAxisAlignment to control child positioning.

Ideal for layouts where elements appear one below another.

Column sizes itself to fit its children vertically.

It is a fundamental widget for building vertical layouts in Flutter.