Does the order of these modifiers matter? `Modifi...

# compose

[Koneko Toujou]

Does the order of these modifiers matter?

Modifier.padding
Modifier.offset (or any other position modifier)
Modifier.requiredHeight (or any other size modifier)

For example

Text(
    modifier = Modifier
        .padding(horizontal = 16.dp)
        .requiredHeight(50.dp)
        .offset(10.dp)
)

And

Text(
    modifier = Modifier
        .requiredHeight(50.dp)
        .offset(10.dp)
        .padding(horizontal = 16.dp)
)

In which both have a height of 50 and offset of 10, and a padding of 16

[Adam Powell]

modifier ordering always matters, even if there are often multiple ways to achieve equivalent visual results

[Koneko Toujou]

Hmm ok

[Koneko Toujou]

as I'm trying to mentally visualise what the above compositions would look like on screen, and how the modifiers are applied

For example, in

Modifier.offset(...).requiredHeight(...).padding(...)
How is it possible to apply padding to an offset and modified height?

[Adam Powell]

read each step as, "then."
"Apply an offset, then require the height of what comes after that to be N, then apply padding to what comes after that..."

[Koneko Toujou]

Makes sense

[Koneko Toujou]

What would happen if we pad and then set a required height?

[Koneko Toujou]

Like is it possible for the padding to cause the required height to no longer fit due to it being larger than the result of the padding?

[Adam Powell]

padding affects the available space for the inner content, so yes. You can see the difference with padding and sizing in the same dimension:

Modifier.padding(16.dp).height(50.dp)

will produce an element that takes up 66dp: 50 for the content and 16 for the padding. In contrast,

Modifier.height(50.dp).padding(16.dp)

will produce an element that takes up 50dp: 16 for the padding and 34 for the content. The padding subtracted from the 50dp of available space requested by .height.

[Adam Powell]

it's harder to see the distinction when you're talking about different dimensions for each; it works exactly the same way - order still matters, but you're doing arithmetic with zero so it looks like nothing different is happening.

[Koneko Toujou]

Yea, for example

Size 20       (0, 0, 20, 20)
Pad 2         (2, 2, 16, 16)
MinHeight 20  Invalid
available space 14

Vs

Size 20       (0, 0, 20, 20)
MinHeight 20  (0, 0, 20, 20)
Pad 2         (2, 2, 16, 16)
available space 14

[Koneko Toujou]

And thanks 🙂