'AnimatedVisibility and BringIntoViewRequester not working together

I'm building an expandable Composable which would be expanded when clicked. This would be implemented by using the AnimatedVisibility which works perfectly. Code for the visibility animation:

AnimatedVisibility(
    visible = isExpanded, 
) {
    // Content removed.
}

The problem I'm currently facing is that this is located in a vertical scrollable column and it should scroll to the expanded content when clicked next to expanding it.

As I read this would be done by using the BringIntoViewRequester as in the code snippet below:

var isExpanded by remember { mutableStateOf(false) }
val intoViewRequester = remember { BringIntoViewRequester() }

ClickableComposable(modifier = Modifier.clickable {
    isExpanded = !isExpanded
    if(isExpanded) {
        coroutineScope.launch {
            // delay(200)
            intoViewRequester.bringIntoView(rect = null)
        }
     }
})

AnimatedVisibility(
    modifier = Modifier.bringIntoViewRequester(intoViewRequester),
    visible = isExpanded, 
) {
    // Content removed.
}

The code above works with the delay but that's not a perfect interaction for the user. To first see the content expanding and afterwards see the page scroll. The ideal situation would be that it would happen at the same time, however the content is not yet measured in any way. By removing the delay it does not work as the content is not yet visible.

Is there anything in Compose to do the expanding and scrolling to at the same time?



Sources

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

Source: Stack Overflow

Solution Source