For example, if we wished to display three text widgets within a column we can create a Column widget like below:

new Column(
    children: <Widget>[
new Text('The first line of text'),
new Text('The second line of text'),
new Text('The third line of text'),
    ],
)

When using the Column widget we can only use the space that is available to us on the screen, similar to the Row widget. If we wish to display more items on the screen then we can make use of the ListView widget to allow scrolling.

The code above gives us something like the result below. Our text by default is aligned into the center and the Column widget itself only uses the space that it requires for its layout.

We can use the crossAxisAlignment property to align our text in the desired direction, for example, crossAxisAlignment.start would give us the following result:

Whilst crossAxisAlignment.end would do the opposite:

So how does a Column lay out it’s child widgets?

• To begin the process, the Column lays out each of it’s children that aren’t wrapped in an Expanded widget (this means that they have a zero flex factor), it lays these out with no vertical constraints.
• Next, for children that have a non-zero flex factor, these children are allocated with the remaining vertical space distributed amongst them (according to their flex factor) — however at this point they are not laid out yet.
• The third step simply involves laying out the child widgets that have non-zero flex factors that were allocated their vertical sizing in step 2. If the widget has the FlexFit property set, then this will affect the layout of the child.
• The next steps involve the calculation of the Column width and height. By default, the width of the Column is set to the width of the widest child widget. And by default, the height of the Column is set to wrap the vertical height of it’s contents. However, we can make use of the mainAxisSize property to change this behaviour.

new Column(
crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min, 
children: <Widget>[
new Text('The first line of text'),
new Text('The second line of text'),
new Text('The third line of text'),
],
)

• Finally, the position for each child inside of the Column is determined. This is where the crossAxisAlignment and mainAxisAlignment are evaluated to calculate any required space to be allocated for the positioning of the child widgets.

When it comes to the Column, there are a collection of properties which we can assign to the Widget:

• children — This property consists of a List of Widget instances that are contained within this Column

children: <Widget>[ ... ]

• textBaseline — The baseline to be used if aligning items according to their baseline

textBaseline: TextBaseline.alphabetic

• textDirection — The order in which children are to be laid out horizontally

textDirection: TextDirection.ltr

• verticalDirection — The order in which children are to be laid out vertically

verticalDirection: VerticalDirection.down

• crossAxisAlignment — The positioning of the child widgets on the cross axis

crossAxisAlignment: CrossAxisAlignment.start

• mainAxisAlignment — The positioning of the child widgets on the main axis

mainAxisAlignment: MainAxisAlignment.center

• mainAxisSize— The size that should be allocated to the widget on the main axis

mainAxisSize: MainAxisSize.min

More properties are visible on the full documentation: https://docs.flutter.io/flutter/widgets/Column-class.html

Enjoy the other snippets in this publication! Leave a comment below or tweet me if with any questions / suggestions!

Tweets by hitherejoe