Stack

Parameter Description
modifier Modifier to be applied to the Stack
orientation Controls whether children are laid out horizontally or vertically. Defaults to StackOrientation.Horizontal
mainAxisArrangement Controls the arrangement of children along the main axis (horizontal for horizontal orientation, vertical for vertical orientation). Defaults to MainAxisArrangement.Start
crossAxisAlignment Controls the alignment of children on the cross axis (vertical for horizontal orientation, horizontal for vertical orientation). Defaults to CrossAxisAlignment.Start
spacing Space between children. Ignored when using SpaceEvenly, SpaceBetween, or SpaceAround arrangements. Defaults to 0.dp
content The composable content to be laid out within the Stack

Code Examples

Basic Example

Use Stack to arrange its children horizontally by default:

import com.composeunstyled.Stack
Stack {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}

Orientation

Use orientation with the desired StackOrientation to arrange children vertically or horizontally:

import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
Stack(orientation = StackOrientation.Vertical) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}

Main Axis Arrangement

Use mainAxisArrangement to control how children are distributed along the main axis.

import com.composeunstyled.MainAxisArrangement
import com.composeunstyled.Stack
Stack(mainAxisArrangement = MainAxisArrangement.SpaceBetween) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}

Cross Axis Alignment

Use crossAxisAlignment to align children on the perpendicular axis.

import com.composeunstyled.CrossAxisAlignment
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
Stack(
    orientation = StackOrientation.Horizontal,
    crossAxisAlignment = CrossAxisAlignment.Center,
) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}

Spacing

Use spacing to control the amount of spacing between children.

import com.composeunstyled.Stack
Stack(spacing = 48.dp) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}

Weights

Use Modifier.weight() on any children within the StackScope to control its size relative to other children in the Stack.

import com.composeunstyled.Stack
Stack {
    Box(Modifier.size(48.dp)) {
        Text("1f")
    }
    Box(Modifier.weight(1f)/*...*/) {
        Text("1f")
    }
    Box(Modifier.weight(2f)/*...*/) {
        Text("2f")
    }
}

Responsive design

Use orientation to dynamically change how the Stack lays out its children based on screen size.

To get context about the screen size, use currentWindowContainerSize():

import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
import com.composeunstyled.currentWindowContainerSize
val containerSize = currentWindowContainerSize()
val orientation = if (containerSize.width >= 600.dp) {
    StackOrientation.Horizontal
} else {
    StackOrientation.Vertical
}

Stack(
    orientation = orientation,
    spacing = 16.dp
) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}