'Jetpack Compose - Composable's height resizing with AnimatedVisibility

I'm trying to build a custom Drop down menu and I encountered some issues in animating its state. The animation is both laggy and sketchy, even on a real device and even on a release build (APK). The Compose version I'm using is 1.1.1.

enter image description here

Observe the flicker (and the lag?).

The code:

Column(modifier = Modifier.fillMaxWidth()) {
    var visible by remember { mutableStateOf(false) }
    //header
    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .clickable { visible = !visible }
                .padding(8.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(
                text = "Click me",
                style = MaterialTheme.typography.h6
            )
            Icon(
                modifier = Modifier.rotate(animateFloatAsState(if (visible) 180f else 0f).value),
                imageVector = Icons.Default.KeyboardArrowDown,
                contentDescription = null
            )
        }
        Divider(
            modifier = Modifier.fillMaxWidth(),
            color = Color.Black.copy(ContentAlpha.disabled)
        )
    }
    //the 4 items
    Column {
        (1..4).forEach {
            AnimatedVisibility(
                visible = visible,
                enter = expandVertically(
                    spring(
                        stiffness = Spring.StiffnessLow,
                        visibilityThreshold = IntSize.VisibilityThreshold
                    ),
                ),
                exit = shrinkVertically(),
            ) {
                Column {
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp),
                        horizontalArrangement = Arrangement.SpaceBetween
                    ) {
                        Text(
                            text = "Hello",
                            style = MaterialTheme.typography.h6
                        )
                        Icon(
                            imageVector = Icons.Default.KeyboardArrowRight,
                            contentDescription = null
                        )
                    }
                    Divider(
                        modifier = Modifier.fillMaxWidth(),
                        color = Color.Black
                    )
                }
            }
        }
    }
}

If I add some bottom padding to the bigger Column or if I make it occupy the whole screen's height, there's no more flicker, but I feel like that is a workaround and also I'm not sure whether the animation is lagging or not, so this wouldn't be a solution to all my problems. The parent Column wraps around its content and as the content size increases, it tries to "keep up" with the new size, but it doesn't do a perfect job. Am I using AnimatedVisibility improperly? How else could I create a custom Drop down menu?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source