Modifiers — the decorator chain

Everything that is not the content

Your Greeting from the last lesson works, and it looks terrible. The text is jammed into the top-left corner with no breathing room, no background, no size of its own.

Text is not going to fix that, and it should not try. A Text composable has one job: put these characters on screen. Where they sit, how much space they take, what colour is behind them, whether tapping them does anything — none of that is text's business.

All of it comes from one place instead: the Modifier.

1Text(
2    text = "Hello from Compose",
3    modifier = Modifier
4        .background(Color(0xFFB7F1E6))
5        .padding(16.dp)
6)

Almost every composable in the entire Compose library takes a modifier parameter, and they all mean the same thing by it. Learn the chain once and you have learned the layout half of Compose.

What a Modifier actually is

Modifier on its own is an object meaning "no instructions at all". Every function you call on it hands back a new modifier carrying one more instruction:

1val a = Modifier
2val b = a.padding(16.dp)
3val c = b.background(Color.White)

a is still empty. b still only has padding. Modifiers are immutable — nothing is ever changed in place, which is why you can safely store one in a val and reuse it in three composables without them interfering with each other.

In practice you never write it as three lines. You chain:

1Modifier
2    .padding(16.dp)
3    .background(Color.White)

One call per line, indented. That is the house style for this course, and it is not just tidiness — with the 60-character limit of Pocket Studio's editor, a chain of four modifiers on one line is unreadable on a phone.

Reading the chain: top is outside

This is the single rule that makes order make sense:

The first modifier in the chain is the outermost layer. The composable itself is innermost.

So Modifier.padding(16.dp).background(Color.White) means: padding on the outside, then a white background, then the content. The white starts after the padding — the padding is transparent.

Turn it around and you get the opposite:

1Modifier
2    .background(Color.White)
3    .padding(16.dp)

Now white is the outer layer, so the white area includes the 16 units of padding, and the content sits in the middle of a white block.

Here are both, side by side, for real:

1@Composable
2fun OrderDemo() {
3    Column(modifier = Modifier.padding(20.dp)) {
4        Text(
5            text = "background then padding",
6            modifier = Modifier
7                .background(Color(0xFFB7F1E6))
8                .padding(12.dp)
9        )
10        Spacer(Modifier.height(16.dp))
11        Text(
12            text = "padding then background",
13            modifier = Modifier
14                .padding(12.dp)
15                .background(Color(0xFFB7F1E6))
16        )
17    }
18}

The first block is a comfortable teal label. The second is a cramped teal label floating in white space. Neither is wrong — but only one of them is what you meant, and now you can tell which is which by reading the chain.

The modifiers you will use constantly

Two of those need a word of explanation.

.dp is a density-independent pixel. Phones vary enormously in how many real pixels they cram into a centimetre, so Compose never asks you for pixels. 16.dp is about a fingernail's width on every phone ever made. You get it with import androidx.compose.ui.unit.dp, and you write it as a suffix on a number, because dp is an extension property on Int — exactly the Kotlin feature from Lesson 1.18.

fillMaxWidth takes an optional fraction: fillMaxWidth(0.5f) means half the available width. Dice Duel uses that trick to draw a score bar filling up.

The convention every reusable composable follows

Look at a real composable from Dice Duel:

1@Composable
2fun DieFace(
3    value: Int,
4    modifier: Modifier = Modifier,
5    size: Dp = 160.dp,
6    onRoll: () -> Unit = {}
7) {
8    Canvas(
9        modifier = modifier
10            .size(size)
11            .clickable { onRoll() }
12    ) {
13        drawDie(value)
14    }
15}

Three details there are a convention followed by the entire Compose ecosystem, and you should follow it too:

1. Accept a modifier parameter. Anyone using your composable will eventually want to add padding or a weight from the outside. If you do not accept one, they cannot, and they have to wrap your composable in a Box to work around you.
2. Give it the default value Modifier. That means "no extra instructions", so callers who do not care can ignore it.
3. Make it the first parameter that has a default, and apply it to your outermost element, before any of your own modifiers. modifier.size(size) — the caller's instructions go on the outside, yours on the inside. That way a caller's .padding() sits outside your .size(), which is what they expect.

Here is that paying off. In GameScreen.kt, the caller adds a spin without DieFace knowing anything about animation:

1DieFace(
2    value = die,
3    size = 172.dp,
4    modifier = Modifier.graphicsLayer {
5        rotationZ = spin
6    },
7    onRoll = { roll() }
8)

Read that chain out loud and it is almost English: round the corners, fill it pink, outline it red, then leave a gap before the content.