Row

Arrange children horizontally from left to right.

Overview

Row is a layout widget that displays its children in a horizontal array. It works identically to Column but arranges children horizontally instead of vertically.

Basic Usage

Row {
    Text("First")
    Text("Second")
    Text("Third")
}

import JavaScriptKit
import Shaft
import ShaftWeb

// Setup ShaftWeb backend for running in ShaftPad
Shaft.backend = ShaftWebBackend { _ in
    JSObject.global.document.querySelector("canvas")
}

class RowDemoView: StatelessWidget {
    func build(context: any BuildContext) -> any Widget {
        Row(spacing: 16) {
            Text("A")
                .textStyle(.init(color: Color(0xFF_FFFFFF)))
                .padding(.all(20))
                .decoration(.box(color: Color(0xFF_007AFF), borderRadius: .circular(8)))

            Text("B")
                .textStyle(.init(color: Color(0xFF_FFFFFF)))
                .padding(.all(20))
                .decoration(.box(color: Color(0xFF_5856D6), borderRadius: .circular(8)))

            Text("C")
                .textStyle(.init(color: Color(0xFF_FFFFFF)))
                .padding(.all(20))
                .decoration(.box(color: Color(0xFF_AF52DE), borderRadius: .circular(8)))
        }
        .center()
    }
}

runApp(RowDemoView())

Main Axis Alignment

Control horizontal positioning:

// Align to start (left) - default
Row(mainAxisAlignment: .start) {
    Text("Left")
    Text("Items")
}

// Center horizontally
Row(mainAxisAlignment: .center) {
    Text("Centered")
    Text("Content")
}

// Align to end (right)
Row(mainAxisAlignment: .end) {
    Text("Right")
    Text("Items")
}

// Space between
Row(mainAxisAlignment: .spaceBetween) {
    Text("Left")
    Text("Center")
    Text("Right")
}

// Space around
Row(mainAxisAlignment: .spaceAround) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

// Space evenly
Row(mainAxisAlignment: .spaceEvenly) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

Cross Axis Alignment

Control vertical positioning:

// Align to start (top)
Row(crossAxisAlignment: .start) {
    Text("Top aligned")
    Text("Also top")
}

// Center vertically - default
Row(crossAxisAlignment: .center) {
    Text("Centered")
    Text("Vertically")
}

// Align to end (bottom)
Row(crossAxisAlignment: .end) {
    Text("Bottom")
    Text("Aligned")
}

// Stretch to fill height
Row(crossAxisAlignment: .stretch) {
    Text("Full height")
    Text("Stretched")
}

Spacing

Add fixed spacing between children:

Row(spacing: 12) {
    Text("Item 1")
    Text("Item 2")  // 12px to the right
    Text("Item 3")  // 12px to the right
}

Using Expanded

Distribute remaining horizontal space:

Row {
    Text("Left")
    
    Expanded {
        // Takes remaining space
        SizedBox()
    }
    
    Text("Right")
}

// Multiple expanded
Row {
    Expanded(flex: 1) {
        Text("1/3 width")
            .center()
    }
    Expanded(flex: 2) {
        Text("2/3 width")
            .center()
    }
}

Parameters

See Also

• Column - Vertical layout
• Expanded - Fill available space
• Stack - Overlay widgets
• Layout System - Layout concepts