FlexColumn

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).
  • 2. 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.
  • 3. 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.

Caveats

• FlexColumn width: Note that setting a width for a FlexColumn acts more like a maximum width constraint. The FlexColumn determines its actual width based on the widest child, aligning the other children along the horizontal cross-axis according to this width. This means if this actual width is less than the specified width, the crossAxis only affects the alignment of the children within the determined (lesser) width. If you wish to stretch all the children to the same specified width, add crossAxis: stretch in addition to the fixed width.

Usage

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

FlexColumn:
  children:
    - 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":

FlexColumn:
  children:
    - Text: 
        text: Child 1   # default flex=1 since not specified
    - Text: 
        text: Child 2
        styles:
          flex: 2
    - Text: 
        text: Child 3
        styles:
          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):

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

Related

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

Reference

Properties

Styles

Box Styles (Inherited)

box

Base Styles (Inherited)

base