Column Widget

What is Column Widget?

A widget that displays its children in a vertical array.

Use column widget to Layout a list of child widgets in the vertical direction.

1. Column is a vertical, linear layout.
2. The Column widget does not scroll.

Default Constructor

The default constructor creates a vertical array of children.

Column(
    mainAxisAlignment: MainAxisAlignment.start,
    mainAxisSize: MainAxisSize.max,
    crossAxisAlignment: CrossAxisAlignment.center,
    verticalDirection: VerticalDirection.down,
    children: const <Widget>[],
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The mainAxisAlignment parameter is to how the children should be placed along the main axis. For example, MainAxisAlignment.start, the default, places the children at the start of the main axis i.e. the top for a Column.

The mainAxisSize: parameter is to how the children should be placed along the main axis. If the mainAxisSize property is MainAxisSize.max, then the height of the Column is the max height of the incoming constraints.

The crossAxisAlignment parameter is to how the children should be placed along the cross axis. For example, CrossAxisAlignment.center, the default, centers the children in the cross axis (e.g., horizontally for a Column).

The verticalDirection parameter is to determine the order to lay children out vertically and how to interpret start and end in the vertical direction. Defaults to VerticalDirection.down. VerticalDirection.down means boxes should start at the top and be stacked vertically towards the bottom. The "start" is at the top, the "end" is at the bottom.

Code snippet

This following code snippet shows how to configure Column widget with different arguments values.

Column(
      children: <Widget>[
        Text(
          'Welcome!',
          textDirection: TextDirection.ltr,
        ),
        Text(
          'Hello, world!',
          textDirection: TextDirection.ltr,
        )
      ],
);

0Demo Code

This example uses a Column to arrange two Text widgets across main axis and cross axis.

import 'package:flutter/material.dart';

class ColumnDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Return any widget class
    return Column(
      children: <Widget>[
        Text(
          'Welcome!',
          textDirection: TextDirection.ltr,
        ),
        Text(
          'Hello, world!',
          textDirection: TextDirection.ltr,
        )
      ],
    );
  }
}

void main() {
  runApp(ColumnDemo());
}