Expanded: what it is and how it works in Flutter

What is Expanded

Expanded is a wrapper widget that takes a child and forces it to expand to fill the available space in a Flex container (Row, Column, Flex). Expanded has no visual representation of its own — it only manages the constraints passed to the child element.

At the core of Expanded is the Flex mechanism provided by the Flutter framework. When Row or Column calculate the sizes of their children, they first allocate space to inflexible elements (regular widgets with fixed sizes), then distribute the remaining space among Expanded and Flexible children proportionally to their flex factors.

Expanded uses Flexible.fit = FlexFit.tight. This means the child of Expanded must occupy all the allocated space, even if its own size is smaller. Unlike Flexible with Fit.loose, where the child can be smaller than the allocated area, Expanded forcibly stretches the content.

In summary: Expanded is the primary tool for creating proportional layouts in Flutter. Use it when you need an element to guaranteed fill all available width or height.

Expanded vs Flexible: key differences

Expanded and Flexible both distribute space in Flex containers, but behave fundamentally differently. The difference lies in the fit property, which determines whether the child can be smaller than the available space.

Expanded has a strict behavior model: its fit equals FlexFit.tight. This means the child widget receives constraints equal to the available space — no more, no less. If the child is smaller, it stretches. If larger, it shrinks. Flexible uses FlexFit.loose, allowing the child element to be any size within the allocated space.

In practice: if a Row contains two Expanded with flex=1, each will take exactly half the width. If you replace them with Flexible with fit.loose, each child may be smaller than half if its own size is smaller — the remaining space stays empty.

In summary: use Expanded for strict proportional layouts, Flexible when the child can be smaller than the available space. If unsure — start with Expanded, it gives more predictable behavior.

Flex factor: how space is distributed

Flex factor (flex parameter) is a numeric value that determines the portion of available space an Expanded will receive. By default flex=1, meaning equal distribution among all Expanded children.

The distribution algorithm works in three steps. First: Flutter calculates the intrinsic size of all inflexible children. Second: the remaining space is divided by the sum of all flex factors. Third: each Expanded receives a share equal to its flex factor multiplied by the size of one flex unit.

For example, a Row 300px wide contains two Expanded: the first with flex=2, the second with flex=1. The free space (300px minus inflexible children) is divided into 3 parts. The first gets 2/3, the second gets 1/3. If there are no inflexible children, the first gets 200px, the second gets 100px.

The flex factor can be any positive integer. Value 0 is a special case: Expanded with flex=0 behaves like a regular inflexible widget, taking minimal space according to the child's size. This behavior is equivalent to not having Expanded at all.

In summary: the flex factor is the key to building flexible layouts. Use ratios 1:1 for equal columns, 2:1 for panels with a main and sidebar area, 3:1 for interfaces with narrow navigation.

Code examples with Expanded

Example 1 demonstrates basic usage of Expanded in Row to create three equal columns.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

In this example, three Expanded with flex=1 (default) divide the Row width equally. The containers stretch to the full height set by Row and occupy equal shares. This approach is convenient for creating column-based layouts with proportional distribution.

Example 2 shows using different flex factors to create a layout with a sidebar and main content.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Sidebar'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Content Area'),
        ),
      ),
    ),
  ],
)

The second example creates a typical layout with a sidebar (25%) and main content area (75%). flex=1 and flex=3 give a 1:3 ratio. When the screen width changes, proportions are preserved automatically — this is the foundation of responsive interfaces.

In summary: Expanded with different flex factors is a standard tool for building responsive layouts. Combining Expanded in Column allows creating both horizontal and vertical proportional arrangements.

Common mistakes when using Expanded

Mistake 1: using Expanded outside Row, Column or Flex. If you place Expanded directly in Stack, ListView or another non-Flex container, Flutter throws a LayoutException with the message "Expanded widgets must be placed inside Flex widgets". Solution: check the parent widget — only Row, Column or Flex.

Mistake 2: placing Expanded inside ListView without specifying shrinkWrap. ListView by default has infinite height in the scroll direction, and Expanded cannot calculate its share. Solution: use shrinkWrap: true or wrap the ListView in a SizedBox with a fixed height.

Mistake 3: multiple Expanded with total flex exceeding available space. If a Row with limited width contains Expanded as well as widgets with large intrinsic size, overflow may occur. Solution: check the minimum sizes of inflexible children and use FittedBox or Flex fit if needed.

Mistake 4: nested Expanded in Column inside Row. If an Expanded inside a Column contains another Expanded inside a Row, a constraint conflict may arise. Solution: limit nesting depth or use ConstrainedBox to explicitly set dimensions at intermediate levels.

In summary: Expanded requires the correct parent context. Always check that Expanded is placed directly in Row, Column or Flex, and avoid nesting without explicit dimensions.