Kotlin

Compose Modifier Chain

admin by @admin ADMIN
Jun 13, 2026
Jun 1, 2026
Public
0 0 up · 0 down Sign in to vote
`Modifier` is how you customize composables — padding, click handlers, background, size, alignment. Order matters: each modifier wraps the previous one.
Kotlin
Raw
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun Card(label: String, onClick: () -> Unit) {
    Text(
        text = label,
        modifier = Modifier
            .fillMaxWidth()                    // 1. take full width
            .padding(horizontal = 16.dp)       // 2. then add outer padding
            .clip(RoundedCornerShape(12.dp))   // 3. then clip to rounded shape
            .background(Color.LightGray)       // 4. then fill background
            .clickable(onClick = onClick)      // 5. then add click handler
            .padding(16.dp)                    // 6. inner padding (inside the bg)
    )
}

// ⚠️ Order matters!
//    .padding(16.dp).background(Color.Red)   → padding is OUTSIDE the red bg
//    .background(Color.Red).padding(16.dp)   → padding is INSIDE the red bg
Tags

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.