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
)
}
}
}
how can make the exit animation look good