Flutter Column Cookbook

The column is used in Flutter to create a vertical array of widgets. The Column is not scrollable. If you wrap it up with a ListView, it will become scrollable.

The definition of a column is as follows.

Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment =                
      CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );

Let’s see how would we implement it.

This is a basic column with two widgets.

Column(
        children: <Widget>[
          new Container(
            width: 200.0,
            height: 100.0,
            color: Colors.red,
            child: Center(child: new Text("Col 1")),
          ),
          new Container(
            height: 100.0,
            width: 200.0,
            color: Colors.blue,
            child: Center(child: new Text("Col 2")),
          ),
        ],
      ),

It would look like

Flutter basic column

Lets go through it’s arguments.

To make those Containers vertically aligned at different positions, use mainAxisAlignment

Align it in center of its parent

mainAxisAlignment: MainAxisAlignment.center

Place the widgets vertically as far as possible

mainAxisAlignment: MainAxisAlignment.spaceEvenly

Align the widgets in the bottom of the parent

mainAxisAlignment: MainAxisAlignment.end

Place the free space evenly between the children as well as half of that space before and after the first and last child

mainAxisAlignment: MainAxisAlignment.spaceEvenly

Place the free space evenly between the children as well as before and after the first and last child

mainAxisAlignment: MainAxisAlignment.spaceAround

Align the widgets in to the top of the parent

mainAxisAlignment: MainAxisAlignment.start
//default

mainAxisAlignment: MainAxisAlignment.center

There is another argument known as mainAxisSize.

This argument lets us to choose between two options. Maximum and minimum. If we choose the max then the column will stretch to the size of the parent. But it won’t make any change to the current output max is the default value of this argument. Eg:

mainAxisSize: MainAxisSize.min,

If we choose min the vertical size of the column will shrink to the height of it’s children.

We will cover one more argument of Column. It is the of the verticalDirection. Using verticalDirection, we can arrange the widgets in the column such that widget in the bottom becomes the first widget.

verticalDirection: VerticalDirection.up,

The Column will not be completed without talking about Flexible Widget. Flexible is used to cover up the remaining space in a Column. The widget which is wrapped inside Flexible will cover the remaining space of the column.

Flexible(
    child: new Container(
    width: 200.0,
    color: Colors.blue,
    child: Center(child: new Text("Col 2")),
  ),
),

That’s almost everything basic of Columns. Hope you enjoy the article. Feel free to ask doubts in response.

Flutter Community