Stack

A flexible Compose layout composable that arranges its children either horizontally or vertically, providing a unified API that abstracts over Row and Column layouts.
ParameterDescription
modifierModifier to be applied to the Stack
orientationControls whether children are laid out horizontally or vertically. Defaults to StackOrientation.Horizontal
mainAxisArrangementControls the arrangement of children along the main axis (horizontal for horizontal orientation, vertical for vertical orientation). Defaults to MainAxisArrangement.Start
crossAxisAlignmentControls the alignment of children on the cross axis (vertical for horizontal orientation, horizontal for vertical orientation). Defaults to CrossAxisAlignment.Start
spacingSpace between children. Ignored when using SpaceEvenly, SpaceBetween, or SpaceAround arrangements. Defaults to 0.dp
contentThe composable content to be laid out within the Stack

Code Examples

Basic Example

Use Stack to arrange its children horizontally by default:

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

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:

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

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.

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

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.

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

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.

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

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.

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

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():

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

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")
    }
}