A widget that displays its children in a vertical array.
To cause a child to expand to fill the available vertical space, wrap thechild in an Expanded widget.
The Column widget does not scroll (and in general it is considered an errorto have more children in a Column than will fit in the available room). Ifyou have a line of widgets and want them to be able to scroll if there isinsufficient room, consider using a ListView.
For a horizontal variant, see Row.
If you only have one child, then consider using Align or Center toposition the child.
This example uses a Column to arrange three widgets vertically, the lastbeing made to fill all the remaining space.
link
const Column( children: <Widget>[ Text('Deliver features faster'), Text('Craft beautiful UIs'), Expanded( child: FittedBox( child: FlutterLogo(), ), ), ],)
In the sample above, the text and the logo are centered on each line. In thefollowing example, the crossAxisAlignment is set toCrossAxisAlignment.start, so that the children are left-aligned. ThemainAxisSize is set to MainAxisSize.min, so that the column shrinks tofit the children.
link
Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: <Widget>[ const Text('We move under cover and we move as one'), const Text('Through the night, we have one shot to live another day'), const Text('We cannot let a stray gunshot give us away'), const Text('We will fight up close, seize the moment and stay in it'), const Text("It's either that or meet the business end of a bayonet"), const Text("The code word is 'Rochambeau,' dig me?"), Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)), ],)
Troubleshooting
When the incoming vertical constraints are unbounded
When a Column has one or more Expanded or Flexible children, and isplaced in another Column, or in a ListView, or in some other contextthat does not provide a maximum height constraint for the Column, you willget an exception at runtime saying that there are children with non-zeroflex but the vertical constraints are unbounded.
The problem, as described in the details that accompany that exception, isthat using Flexible or Expanded means that the remaining space afterlaying out all the other children must be shared equally, but if theincoming vertical constraints are unbounded, there is infinite remainingspace.
The key to solving this problem is usually to determine why the Column isreceiving unbounded vertical constraints.
One common reason for this to happen is that the Column has been placed inanother Column (without using Expanded or Flexible around the innernested Column). When a Column lays out its non-flex children (those thathave neither Expanded or Flexible around them), it gives them unboundedconstraints so that they can determine their own dimensions (passingunbounded constraints usually signals to the child that it shouldshrink-wrap its contents). The solution in this case is typically to justwrap the inner column in an Expanded to indicate that it should take theremaining space of the outer column, rather than being allowed to take anyamount of room it desires.
Another reason for this message to be displayed is nesting a Column insidea ListView or other vertical scrollable. In that scenario, there really isinfinite vertical space (the whole point of a vertical scrolling list is toallow infinite space vertically). In such scenarios, it is usually worthexamining why the inner Column should have an Expanded or Flexiblechild: what size should the inner children really be? The solution in thiscase is typically to remove the Expanded or Flexible widgets from aroundthe inner children.
For more discussion about constraints, see BoxConstraints.
The yellow and black striped banner
When the contents of a Column exceed the amount of space available, theColumn overflows, and the contents are clipped. In debug mode, a yellowand black striped bar is rendered at the overflowing edge to indicate theproblem, and a message is printed below the Column saying how muchoverflow was detected.
The usual solution is to use a ListView rather than a Column, to enablethe contents to scroll when vertical space is limited.
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:
- Layout each child with a null or zero flex factor (e.g., those that arenot Expanded) with unbounded vertical constraints and the incominghorizontal constraints. If the crossAxisAlignment isCrossAxisAlignment.stretch, instead use tight horizontal constraintsthat match the incoming max width.
- Divide the remaining vertical space among the children with non-zeroflex factors (e.g., those that are Expanded) according to their flexfactor. For example, a child with a flex factor of 2.0 will receive twicethe amount of vertical space as a child with a flex factor of 1.0.
- Layout each of the remaining children with the same horizontalconstraints as in step 1, but instead of using unbounded verticalconstraints, use vertical constraints based on the amount of spaceallocated in step 2. Children with Flexible.fit properties that areFlexFit.tight are given tight constraints (i.e., forced to fill theallocated space), and children with Flexible.fit properties that areFlexFit.loose are given loose constraints (i.e., not forced to fill theallocated space).
- The width of the Column is the maximum width of the children (whichwill always satisfy the incoming horizontal constraints).
- The height of the Column is determined by the mainAxisSize property.If the mainAxisSize property is MainAxisSize.max, then the height ofthe Column is the max height of the incoming constraints. If themainAxisSize property is MainAxisSize.min, then the height of theColumn is the sum of heights of the children (subject to the incomingconstraints).
- Determine the position for each child according to themainAxisAlignment and the crossAxisAlignment. For example, if themainAxisAlignment is MainAxisAlignment.spaceBetween, any verticalspace that has not been allocated to children is divided evenly andplaced between the children.
See also:
- Row, for a horizontal equivalent.
- Flex, if you don't know in advance if you want a horizontal or verticalarrangement.
- Expanded, to indicate children that should take all the remaining room.
- Flexible, to indicate children that should share the remaining room butthat may size smaller (leaving some remaining room unused).
- SingleChildScrollView, whose documentation discusses some ways touse a Column inside a scrolling container.
- Spacer, a widget that takes up space proportional to its flex value.
- The catalog of layout widgets.
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- RenderObjectWidget
- MultiChildRenderObjectWidget
- Flex
- Column
Constructors
- 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>[]}) - Creates a vertical array of children.
const
Properties
- children → List<
Widget> - The widgets below this widget in the tree.
finalinherited
- clipBehavior → Clip
- The content will be clipped (or not) according to this option.
finalinherited
- crossAxisAlignment → CrossAxisAlignment
- How the children should be placed along the cross axis.
finalinherited
- direction → Axis
- The direction to use as the main axis.
finalinherited
- hashCode → int
- The hash code for this object.
no setterinherited
- key → Key?
- Controls how one widget replaces another widget in the tree.
finalinherited
- mainAxisAlignment → MainAxisAlignment
- How the children should be placed along the main axis.
finalinherited
- mainAxisSize → MainAxisSize
- How much space should be occupied in the main axis.
finalinherited
- runtimeType → Type
- A representation of the runtime type of the object.
no setterinherited
- textBaseline → TextBaseline?
- If aligning items according to their baseline, which baseline to use.
finalinherited
- textDirection → TextDirection?
- Determines the order to lay children out horizontally and how to interpret
start
andend
in the horizontal direction.finalinherited
- verticalDirection → VerticalDirection
- Determines the order to lay children out vertically and how to interpret
start
andend
in the vertical direction.finalinherited
Methods
- createElement(
) → MultiChildRenderObjectElement - RenderObjectWidgets always inflate to a RenderObjectElement subclass.
inherited
- createRenderObject(
BuildContext context) → RenderFlex - Creates an instance of the RenderObject class that thisRenderObjectWidget represents, using the configuration described by thisRenderObjectWidget.
inherited
- debugDescribeChildren(
) → List< DiagnosticsNode> - Returns a list of
DiagnosticsNode
objects describing this node'schildren.inherited
- debugFillProperties(
DiagnosticPropertiesBuilder properties) → void - Add additional properties associated with the node.
inherited
- didUnmountRenderObject(
covariant RenderObject renderObject) → void - A render object previously associated with this widget has been removedfrom the tree. The given RenderObject will be of the same type asreturned by this object's createRenderObject.
inherited
- getEffectiveTextDirection(
BuildContext context) → TextDirection? - The value to pass to RenderFlex.textDirection.
inherited
- noSuchMethod(
Invocation invocation) → dynamic - Invoked when a nonexistent method or property is accessed.
inherited
- toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode - Returns a debug representation of the object that is used by debuggingtools and by DiagnosticsNode.toStringDeep.
inherited
- toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String - A string representation of this object.
inherited
- toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String - Returns a string representation of this node and its descendants.
inherited
- toStringShallow(
{String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String - Returns a one-line detailed description of the object.
inherited
- toStringShort(
) → String - A short, textual description of this widget.
inherited
- updateRenderObject(
BuildContext context, covariant RenderFlex renderObject) → void - Copies the configuration described by this RenderObjectWidget to thegiven RenderObject, which will be of the same type as returned by thisobject's createRenderObject.
inherited
Operators
- operator ==(
Object other) → bool - The equality operator.
inherited