Stack

Overlay widgets on top of each other.

Overview

Stack positions its children on top of each other, creating layered layouts. Perfect for overlays, badges, and complex UI compositions.

Basic Usage

Stack {
    // Bottom layer
    SizedBox(width: 200, height: 200) {
        ColoredBox(color: Color(0xFF_FF6B6B))
    }
    
    // Top layer
    Text("On Top")
        .center()
}

Children are painted in order - last child appears on top.

Stack Layout

import JavaScriptKit
import Shaft
import ShaftWeb

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

class StackDemoView: StatelessWidget {
    func build(context: any BuildContext) -> any Widget {
        Stack(alignment: Alignment.center) {
            // Background layer
            SizedBox(width: 200, height: 200)
                .decoration(.box(color: Color(0xFF_007AFF), borderRadius: .circular(12)))

            // Middle layer
            SizedBox(width: 150, height: 150)
                .decoration(.box(color: Color(0xFF_34C759), borderRadius: .circular(12)))

            // Top layer
            Text("Stacked!")
                .textStyle(.init(color: Color(0xFF_FFFFFF), fontWeight: .bold))
                .padding(.all(16))
                .decoration(.box(color: Color(0xFF_FF3B30), borderRadius: .circular(8)))
        }
        .center()
    }
}

runApp(StackDemoView())

Open in full playground

Alignment

Position children within the stack:

Stack(alignment: .topLeft) {
    ColoredBox(color: Color(0xFF_E0E0E0))
    Text("Top Left")
}

Stack(alignment: .center) {  // default
    ColoredBox(color: Color(0xFF_E0E0E0))
    Text("Center")
}

Stack(alignment: .bottomRight) {
    ColoredBox(color: Color(0xFF_E0E0E0))
    Text("Bottom Right")
}

Positioned Children

Precisely position children using Positioned:

Stack {
    // Background
    ColoredBox(color: Color(0xFF_F5F5F5))
    
    // Positioned elements
    Positioned(top: 10, left: 10) {
        Text("Top Left")
    }
    
    Positioned(bottom: 10, right: 10) {
        Text("Bottom Right")
    }
    
    Positioned(top: 50, left: 50, right: 50) {
        Text("Centered Horizontally")
    }
}

Parameters