Row with weights in Jetpack Compose with AnimatedVisibility brakes the UI

Question

Trying to achieve 3 items in row equally distributed horizontally with option to show/hide some of them in compose v1.3.3.

If it's a simple if statement to include view in compose all works fine (without animation)

Row(
    modifier = modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = "abc", modifier = modifier.weight(1f))
    if (false) {
        Text(text = "def", modifier = modifier.weight(1f))
    }
    if(true) {
        Text(text = "zxc", modifier = modifier.weight(1f))
    }
}

As soon as item wrapped with AnimatedVisibility as condition UI becomes broken.

Row(
    modifier = modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = "abc", modifier = modifier.weight(1f))
    AnimatedVisibility(visible = false) {
        Text(text = "def", modifier = modifier.weight(1f))
    }
    AnimatedVisibility(visible = true) {
        Text(text = "zxc", modifier = modifier.weight(1f))
    }
}

Seems like visibility + size changes same time could ruin the UI.

Is there a way for smooth animation without implementing very custom ones?

Answer 1

The problem here is that the weight modifier should be on the direct childs of row.

In the second case using AnimatedVisibility you should use modifier on AnimatedVisibility and not on Text anymore.

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "abc", modifier = Modifier.weight(1f))
        AnimatedVisibility(visible = false, modifier = Modifier.weight(1f)) {
            Text(text = "def")
        }
        AnimatedVisibility(visible = true, modifier = Modifier.weight(1f)) {
            Text(text = "zxc")
        }
    }