Jetpack Compose Texts maxLine with animateContentSize Modifier is not good for exit animation

56 Views Asked by At

so i made a basic expandable card compose where you click the card to expand and click again to un expand

the texts maxLine property changes b/w Int.MAX_VALUE and unexpandedMaxLines but the problem occurs on exit animation where the maxLine is immediately switched to 5 so the increased card is now half empty and it doesn't look good at all

@Composable
fun ExpandableCard(
    title: String = "Hello",
    details: String = LoremIpsum().values.take(53).joinToString(),
    unexpandedMaxLines: Int = 5
) {
    var expanded by remember { mutableStateOf(false) }
    val rotate = animateFloatAsState(targetValue = if(expanded) 180f else 0f, label = "DrawerIcon")
    Card(Params.rowModifier.clickable { expanded = !expanded }) {
        CustomCol {
            Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
                Text(modifier = Modifier.weight(6f),text = title, style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onPrimaryContainer)
                IconButton(modifier = Modifier.weight(1f),onClick = { expanded = !expanded }) {
                    Icon(modifier = Modifier.rotate(rotate.value),imageVector = Icons.Rounded.KeyboardArrowDown, contentDescription = "expand")
                }
            }
            Text(
                modifier = Modifier.animateContentSize(animationSpec = tween(5000)),
                text = details,
                style = MaterialTheme.typography.bodyLarge,
                overflow = TextOverflow.Ellipsis,
                maxLines = if(expanded) Int.MAX_VALUE else unexpandedMaxLines
            )
        }
    }
}

https://imgur.com/a/Qrc2OVr

how can make the exit animation look good

0

There are 0 best solutions below