EVER WONDERED WHY MY MODIFIER ACTS DIFFERENTLY

Why Modifier Order Matters in Jetpack Compose

In this article, we will learn how modifier order matters in Jetpack Compose.

Photo by Shubham Dhage on Unsplash

Not a Medium Member? “Read For Free”

If you ever wondered why your padding, background, or other modifiers behave strangely in Jetpack Compose, then you are not the only one who has faced this. We've all encountered this issue; the main problem is often the order of modifiers.

Stop Using PNGs! SVG & Vector Best Practices in Jetpack Compose

In this article, we will explore why this occurs and how to fix it in Jetpack Compose.

How do modifiers work?

When you add any modifier to a composable function, it repeatedly takes the result of the previous one and keeps adding modifiers to the composable.

The first modifier is the closest one, and the last one is the outermost.

These chains can directly affect the layout (padding, size), drawing (border, background), and interaction…