Expanded

Fill available space in a Row, Column, or Flex.

Overview

Expanded makes its child widget fill the available space along the main axis of a Row, Column, or Flex. When multiple Expanded widgets are present, space is divided according to their flex factors.

Basic Usage

Row {
    Text("Fixed")
    
    Expanded {
        Text("This fills remaining space")
    }
    
    Text("Fixed")
}

The Expanded child takes all remaining horizontal space after fixed-size children are laid out.

Expanded Examples

import Foundation
import JavaScriptKit
import Observation
import Shaft
import ShaftWeb

Shaft.backend = ShaftWebBackend { _ in
    JSObject.global.document.querySelector("canvas")
}

runApp(ExpandedDemoApp())

final class ExpandedDemoApp: StatelessWidget {
    func build(context: any BuildContext) -> any Widget {
        Column(spacing: 24) {
            Text("Expanded Widget")
                .textStyle(.init(fontSize: 24, fontWeight: .bold))
                .center()

            SizedBox(height: 8)

            // Example 1: Single Expanded
            SizedBox(height: 80) {
                Row {
                    Text("Fixed")
                        .padding(.all(16))
                        .decoration(.box(color: Color(0xFF_E0E0E0)))

                    Expanded {
                        Text("Expanded")
                            .textStyle(.init(color: Color(0xFF_FFFFFF)))
                            .center()
                    }
                    .decoration(.box(color: Color(0xFF_4CAF50)))

                    Text("Fixed")
                        .padding(.all(16))
                        .decoration(.box(color: Color(0xFF_E0E0E0)))
                }
            }

            // Example 2: Multiple Expanded with flex
            SizedBox(height: 80) {
                Row {
                    Expanded(flex: 1) {
                        Text("1")
                            .textStyle(.init(color: Color(0xFF_FFFFFF)))
                            .center()
                    }
                    .decoration(.box(color: Color(0xFF_FF6B6B)))

                    Expanded(flex: 2) {
                        Text("2")
                            .textStyle(.init(color: Color(0xFF_FFFFFF)))
                            .center()
                    }
                    .decoration(.box(color: Color(0xFF_4ECDC4)))

                    Expanded(flex: 1) {
                        Text("1")
                            .textStyle(.init(color: Color(0xFF_FFFFFF)))
                            .center()
                    }
                    .decoration(.box(color: Color(0xFF_FFE66D)))
                }
            }

            Text("Flex ratio: 1:2:1")
                .textStyle(.init(color: Color(0xFF_666666), fontSize: 14))
        }
        .padding(.all(24))
    }
}

Open in full playground

Flex Factor

Control space distribution with flex:

Row {
    Expanded(flex: 1) {
        ColoredBox(color: Color(0xFF_FF6B6B))
    }
    
    Expanded(flex: 2) {
        ColoredBox(color: Color(0xFF_4ECDC4))
    }
    
    Expanded(flex: 1) {
        ColoredBox(color: Color(0xFF_FFE66D))
    }
}

Space is divided: 1/(1+2+1) = 25%, 2/4 = 50%, 1/4 = 25%

Parameters

Parameter	Type	Description	Default
`flex`	`Float`	Flex factor for space distribution	`1`
`child`	`Widget`	The widget to expand	required

How It Works

Layout inflexible children - Fixed-size widgets get their natural size
Calculate remaining space - Subtract inflexible sizes from total
Divide by flex sum - Each Expanded gets (flex / sum) of remaining
Force child size - Child must fill its allocated space (tight constraints)

Expanded vs Flexible

Expanded is identical to Flexible with fit: .tight:

// These are equivalent
Expanded {
    Widget()
}

Flexible(fit: .tight) {
    Widget()
}

Use Flexible with fit: .loose when child can be smaller than allocated space.