Flex Column


FlexColumn is designed to lay out child widgets vertically and proportionally from the available space given by its parent. By default, FlexColumn assigns equal space to each child (flex=1), but this can be customized to accommodate various design requirements.

Best Practices

  • Use FlexColumn when you need a vertical layout with proportional space distribution among the children.
  • Avoid using FlexColumn in a scrollable parent, such as a ListView or a scrollable Column, without a fixed height, as it will lead to layout issues. FlexColumn and its children need to be constrained to a definite size to properly calculate the flex distribution.
  • Avoid using FlexColumn in another Column. Column does not constrain its children's dimensions, which FlexColumn requires to calculate the flex distribution. Instead consider giving the FlexColumn a height or use all FlexColumn(s) up the parent chain.

Key Concepts

  • flex: Determines the space a child widget occupies relative to its siblings. By default, all children in a FlexColumn have a flex value of 1 unless specified.
  • flexMode: Dictates how a child widget uses its allocated space. It can be set to the below:.
    • expanded: The child will attempt to fill its allocated space based on the flex factor (this is the default).
    • flexible: The child occupies only the space it needs, up to its flex factor.
    • none: The child occupies the space it needs (flex factor is ignored).
  • When laying out its children, FlexColumn follows this specific order:
      1. Widgets with flexMode marked as none will be laid out first and receive all the space they need. Use caution as this can overflow the parent's available spaces (use 'flexible' is probably sufficient most of the time).
      1. Widgets marked as flexible are laid out next. They're allowed to occupy space up to their flex factor but can be smaller if they don't require all the space. This is useful for widgets that can size themselves according to their content but should be limited to a specific portion of the available space.
      1. The remaining space is then divided among expanded widgets according to their flex factors. These widgets are stretched to fill the allocated space, ensuring that all available space is used.


A simple FlexColumn with three child widgets, each taking up equal space (all have flex=1 by default):

    - Text:
        text: Child 1
    - Text: 
        text: Child 2
    - Text: 
        text: Child 3

Assigning different flex values to children to control their space distribution. In the example below, "Child 2" will occupy twice the space of "Child 1" and "Child 3":

    - Text: 
        text: Child 1   # default flex=1 since not specified
    - Text: 
        text: Child 2
          flex: 2
    - Text: 
        text: Child 3
          flex: 1

Adjusting FlexMode to control how children occupy their allocated space. In the example below, "Flexible Child" will be laid out with the size it needs, up to a 1/3 of the available space. "Expanded Child" will be laid out next, occupy the rest of the available space, but not smaller than 2/3 of the available space (since Flexible can only grow to 1/3 max, and all available spaces will be used):

    - Text:
        text: Flexible Child
          flexMode: flexible
    - Text: 
        text: Expanded Child
          flex: 2
          flexMode: expanded


  • See FlexRow for a similar layout in the horizontal direction.
  • See Column for a more generic and scrollable container for laying out children vertically.



childrenWidget[]An array of child widgets to be laid out in the column.
onTapActionAn action that is triggered when the widget is tapped.
onTapHapticTapHapticThe type of haptic feedback to be triggered on tap.
stylesobjectSee properties


Style PropertyTypeDescription
mainAxisstringAlignment of children along the main axis (vertical). Options: start, end, center, spaceBetween, spaceAround, spaceEvenly.
crossAxisstringAlignment of children along the cross axis (horizontal). Options: start, end, center, stretch, baseline.
mainAxisSizeMainAxisSizeHow to size the container along the main axis.
gapintegerThe gap between child widgets, in logical pixels.
fontFamilystringThe font family to use for text within the widget.
fontSizeintegerThe size of the font to use for text within the widget.
widthintegerThe width of the widget, in logical pixels.
heightintegerThe height of the widget, in logical pixels.
clipContentbooleanWhether to clip the widget's content. Useful for preventing overflow.
boxShadowBoxShadowShadow properties for the widget.
borderRadiusBorderRadiusThe radius of the widget's corners.
borderColorColorThe color of the widget's border.
borderWidthintegerThe width of the widget's border, in logical pixels.
backgroundColorColorThe widget's background color.
backgroundImageBackgroundImageOverlay an image on the background of this widget
backgroundGradientGradientBackground gradient of the box
paddingPaddingPadding inside the widget, affecting its child widgets.
marginMarginMargin outside the widget, affecting its position relative to others.
flexintegerApplicable only inside FlexRow or FlexColumn. Determines the space allocated to this widget relative to its siblings.
flexModeFlexModeDetermines how the widget should occupy the space allocated to it by the flex property.
visiblebooleanToggles the widget's visibility. An invisible widget will not occupy UI space unless visibilityTransitionDuration is specified.
visibilityTransitionDurationnumberThe duration in seconds for a widget to animate between visible and invisible states.
elevationintegerThe z-coordinate at which to place this widget relative to its parent. This affects the size of the shadow displayed.
elevationShadowColorColorThe shadow color for the elevation.
elevationBorderRadiusBorderRadiusShould match the widget's borderRadius if set, to ensure the shadow properly matches the widget's border radius.
alignmentAlignmentAligns this widget relative to its parent.
stackPositionTopintegerThe distance of the child's top edge from the top of the parent Stack. Only applicable for Stack's children.
stackPositionBottomintegerThe distance of the child's bottom edge from the bottom of the parent Stack. Only applicable for Stack's children.
stackPositionLeftintegerThe distance of the child's left edge from the left of the parent Stack. Only applicable for Stack's children.
stackPositionRightintegerThe distance of the child's right edge from the right of the parent Stack. Only applicable for Stack's children.
captureWebPointerbooleanApplicable for Web only. Ensures mouse clicks are captured by the widget, useful for overlaying widgets on certain HTML containers.

Box Styles (Inherited)


Base Styles (Inherited)