android how to create a collapsable component to display shorter version of your content

We will create a collapsable component that can display a longer or shorter version of your applications

As you can see here, we use a variable called isExpanded which is a mutableStateOf. This is being used to track if user would like to collapse the report. If it is expanded, then we show INT.MAXLINE otherwise we will just show first 5 lines of the report.

@Composable

fun InsightCard(report: UserReport, viewModel: HomeViewModel) {

    var isExpanded by remember { mutableStateOf(false) }

    Card(
        modifier = Modifier.fillMaxWidth(),
        colors = CardDefaults.cardColors(containerColor = SurfaceDark),
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Checkbox(
                    checked = report.isChecked,
                    onCheckedChange = { isChecked ->
                        viewModel.    (report.reportId, isChecked)
                    }
                )
                Text(
                    text = report.location,
                    color = PrimaryPurple,
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold
                )
            }
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                text = report.propertyType,
                color = TextSecondary,
                fontSize = 14.sp
            )
            Spacer(modifier = Modifier.height(12.dp))
            Column {
                Text(
                    text = report.currentAnalysis,
                    color = TextPrimary,
                    fontSize = 14.sp,
                    maxLines = if (isExpanded) Int.MAX_VALUE else 5
                )
                Spacer(modifier = Modifier.height(4.dp))
                Box(modifier = Modifier.fillMaxWidth()) {
                    TextButton(
                        onClick = { isExpanded = !isExpanded },
                        modifier = Modifier.align(Alignment.BottomEnd)
                    ) {
                        Text(
                            text = if (isExpanded) "Show less ↑" else "Show more ↓",
                            color = PrimaryPurple,
                            fontSize = 12.sp
                        )
                    }
                }
            }
        }
    }
}