I notice that `Arrangement.spacedBy()` doesn't pla...

# compose

[sindrenm]

I notice that Arrangement.spacedBy() doesn't play well with animating content visibility in a `Row`/`Column`.

@Preview
@Composable
fun AnimatedContentInRowPreview() {
    var isIconVisible by remember { mutableStateOf(false) }

    Button(onClick = { isIconVisible = !isIconVisible}) {
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically) {
            AnimatedVisibility(isIconVisible) {
                Icon(Icons.Default.Check, null, Modifier.size(16.dp), Color.White)
            }

            Text("Click me")
        }
    }
}

The issue here is that the spacing is applied immediately when isIconVisible becomes true (but before item is visible), and removed right after the animation ends and AnimatedVisibility “removes itself” from the content. Is there a way around this, but still using spacedBy, or should I instead put padding on the content being animated? Putting content on the animating content works fine, but I prefer the code that spacedBy provides.

[sindrenm]

Pardon the sub-par video quality, but here's a quick screencast showing what I mean. You'll notice that the very end, after animating out, there's a jump where the horizontal spacing between the AnimatedVisibility and the Text is removed.

Screencast from 2023-05-22 18-04-37.webm

[Loney Chou]

One solution: wrap each child with a Box, and specify their Modifier.padding to mimic Arrangement.spacedBy.

[Steffen Funke]

Just linking that here since it seems similar: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1680013492894339

[sindrenm]

Thanks for the comments, and for the linked thread!

Yeah, this is fairly easy to fix by mimicking Arrangement.spacedBy with Modifier.padding. However, I prefer the code that comes with spacedBy, which is essentially why I asked the question. I understand why it's happening as it is, and we are using Modifier.padding in our current solution. 👍