Layouts & Modifiers

The three core layouts

• Column — vertical stack.
• Row — horizontal stack.
• Box — overlap children.

Column(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Title", style = MaterialTheme.typography.titleLarge)
    Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(Icons.Default.Star, contentDescription = null)
        Spacer(Modifier.width(4.dp))
        Text("4.8")
    }
}

Modifiers

Modifiers add padding, size, background, borders, clicks and more. Order matters.

Text(
    "Tap me",
    modifier = Modifier
        .padding(8.dp)
        .background(Color(0xFFF3EEFE), RoundedCornerShape(12.dp))
        .padding(12.dp)
        .clickable { /* action */ }
)

Tip: weight() inside a Row/Column shares leftover space; Spacer pushes items apart.