Modifier Order in Jetpack Compose: Why It Breaks Your UI 🎨

In Jetpack Compose, modifier order matters more than most devs realize. Swapping two modifiers can completely change how your UI looks.

Example 1: Padding + Background

Box(
    modifier = Modifier
        .padding(16.dp)
        .background(Color.Red)
)

👉 The red background is smaller, because padding is applied first.

Box(
    modifier = Modifier
        .background(Color.Red)
        .padding(16.dp)
)

👉 Now the background fills the box, and padding applies inside it.

Example 2: Clip + Border

Image(
    painter = painterResource(id = R.drawable.avatar),
    contentDescription = null,
    modifier = Modifier
        .clip(CircleShape)
        .border(2.dp, Color.Black, CircleShape)
)

👉 The border follows the circle because clip came first. Switch them, and you'll get a square border around a circle.

TL;DR ⚡

• Modifiers apply in order, top to bottom.
• Think of them as a chain of transformations.
• Always check the sequence if your UI looks "off."

In Compose, one misplaced modifier can mean the difference between a pixel-perfect design and a broken layout.