A widget that displays its children in a vertical array.

To cause a child to expand to fill the available vertical space, wrap the child in an Expanded widget.

The Column widget does not scroll (and in general it is considered an error to have more children in a Column than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.

For a horizontal variant, see Row.

If you only have one child, then consider using Align or Center to position the child.

Sample code

This example uses a Column to arrange three widgets vertically, the last being made to fill all the remaining space.

new Column(
  children: <Widget>[
    new Text('Deliver features faster'),
    new Text('Craft beautiful UIs'),
    new Expanded(
      child: new FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),

In the sample above, the text and the logo are centered on each line. In the following example, the crossAxisAlignment is set to CrossAxisAlignment.start, so that the children are left-aligned. The mainAxisSize is set to MainAxisSize.min, so that the column shrinks to fit the children.

new Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    new Text('We move under cover and we move as one'),
    new Text('Through the night, we have one shot to live another day'),
    new Text('We cannot let a stray gunshot give us away'),
    new Text('We will fight up close, seize the moment and stay in it'),
    new Text('It’s either that or meet the business end of a bayonet'),
    new Text('The code word is ‘Rochambeau,’ dig me?'),
    new Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),

Layout algorithm

This section describes how a Column is rendered by the framework. See BoxConstraints for an introduction to box layout models.

Layout for a Column proceeds in six steps:

  1. Layout each child a null or zero flex factor (e.g., those that are not Expanded) with unbounded vertical constraints and the incoming horizontal constraints. If the crossAxisAlignment is CrossAxisAlignment.stretch, instead use tight horizontal constraints that match the incoming max width.
  2. Divide the remaining vertical space among the children with non-zero flex factors (e.g., those that are Expanded) according to their flex factor. For example, a child with a flex factor of 2.0 will receive twice the amount of vertical space as a child with a flex factor of 1.0.
  3. Layout each of the remaining children with the same horizontal constraints as in step 1, but instead of using unbounded vertical constraints, use vertical constraints based on the amount of space allocated in step 2. Children with Flexible.fit properties that are FlexFit.tight are given tight constraints (i.e., forced to fill the allocated space), and children with Flexible.fit properties that are FlexFit.loose are given loose constraints (i.e., not forced to fill the allocated space).
  4. The width of the Column is the maximum width of the children (which will always satisfy the incoming horizontal constraints).
  5. The height of the Column is determined by the mainAxisSize property. If the mainAxisSize property is MainAxisSize.max, then the height of the Column is the max height of the incoming constraints. If the mainAxisSize property is MainAxisSize.min, then the height of the Column is the sum of heights of the children (subject to the incoming constraints).
  6. Determine the position for each child according to the mainAxisAlignment and the crossAxisAlignment. For example, if the mainAxisAlignment is MainAxisAlignment.spaceBetween, any vertical space that has not been allocated to children is divided evenly and placed between the children.

See also:

  • Row, for a horizontal equivalent.
  • Flex, if you don't know in advance if you want a horizontal or vertical arrangement.
  • Expanded, to indicate children that should take all the remaining room.
  • Flexible, to indicate children that should share the remaining room but that may size smaller (leaving some remaining room unused).


Column({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextBaseline textBaseline, List<Widget> children: const [] })
Creates a vertical array of children. [...]


children List<Widget>
The widgets below this widget in the tree. [...]
final, inherited
crossAxisAlignment CrossAxisAlignment
How the children should be placed along the cross axis. [...]
final, inherited
direction Axis
The direction to use as the main axis. [...]
final, inherited
hashCode int
The hash code for this object. [...]
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
mainAxisAlignment MainAxisAlignment
How the children should be placed along the main axis. [...]
final, inherited
mainAxisSize MainAxisSize
How much space should be occupied in the main axis. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
textBaseline TextBaseline
If aligning items according to their baseline, which baseline to use.
final, inherited


createElement() MultiChildRenderObjectElement
RenderObjectWidgets always inflate to a RenderObjectElement subclass.
createRenderObject(BuildContext context) RenderFlex
Creates an instance of the RenderObject class that this RenderObjectWidget represents, using the configuration described by this RenderObjectWidget. [...]
debugFillDescription(List<String> description) → void
Add additional information to the given description for use by toString. [...]
@mustCallSuper, @protected, inherited
didUnmountRenderObject(RenderObject renderObject) → void
A render object previously associated with this widget has been removed from the tree. The given RenderObject will be of the same type as returned by this object's createRenderObject.
@protected, inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toString() String
Returns a string representation of this object.
toStringShort() String
A short, textual description of this widget.
updateRenderObject(BuildContext context, RenderFlex renderObject) → void
Copies the configuration described by this RenderObjectWidget to the given RenderObject, which will be of the same type as returned by this object's createRenderObject. [...]


operator ==(other) bool
The equality operator. [...]