Layouts: Column, Row and Box

Three core layouts

• Column — stacks children vertically.
• Row — places children horizontally.
• Box — layers children on top of each other.

Column(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("Title", style = MaterialTheme.typography.titleLarge)
    Row {
        Icon(Icons.Default.Star, contentDescription = null)
        Text("4.8 rating")
    }
}

Modifiers

Modifier is how you add padding, size, background, click handling and more. They chain in order:

Text(
    "Tap me",
    modifier = Modifier
        .padding(12.dp)
        .background(Color.LightGray)
        .clickable { /* do something */ }
)