Do you know how to position your modifiers in Jetpack Compose? 🤔

With the announcement of Jetpack Compose, we were also introduced to modifiers.

Modifiers are an easy way to control the shape, size, and feel of your Composable. There are many various modifiers that you can use.

With the help of a modifier, you can add any behavior you like. You can make the Composable clickable, draggable, change its' color 🎨, or add padding - you name it.

You can also create custom modifiers for special cases when the standard ones are insufficient.

But there's one crucial thing about modifiers that you have to understand. It's that the order of modifiers matters.

Take a look at the video 🎥.

In this video, I'm showing the answer to the challenge I posted a few days ago

I don't see the point of explaining what's going on in the video. The video is self-explanatory.

As you can see - whenever we change the place of the modifier, it builds a new Composable that is the result 🧩 of these modifiers.

The logic is pretty simple: modifier B, when applied after modifier A, takes into account what changes the modifier A produced.

Let's suppose we have:

1) .padding(24.dp)

2) .background(Green)

If we apply .padding() first - it will give us a "smaller" green composable.

Applying the .background first results in a "larger" green composable with an invisible "inside" padding of 24 dp.

So truly give it a good thought 🧠 when stacking modifiers for a Composable.

A super ugly and unoptimized code of the solution in the video can be found here.

What is your experience with modifiers in Jetpack Compose? Is there anything you would add? Share below 👇