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.

One solution: wrap each child with a Box, and specify their

Modifier.padding

to mimic

Arrangement.spacedBy

.