Jetpack compose: How to hide content if too big? - android-jetpack-compose

Question

I've got a some dynamic content that can vary in size and below that is a circular image. The problem is that when the content becomes too big, the image overflows the content.
The ideal thing would be that if dynamic sized content is too big, the image should be hidden instead. Is it possible to hide the image (the box) if it will not fit?
Example code:
#Composable
fun ImageTest(modifier: Modifier = Modifier,
outlineColor: Color = Color.White,
outlineSize: Dp = 16.dp,
image: Int) {
Column(
horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier
.fillMaxSize()
) {
Text("Content that can be of different sizes", style = MaterialTheme.typography.h2, modifier = Modifier.height(550.dp).background(Color.Red))
// Circular image - HIDE THE BOX IF IT DOESN'T FIT
Box(
modifier = modifier
.background(color = outlineColor, shape = CircleShape)
.padding(outlineSize)
.aspectRatio(ratio = 1f)
) {
Image(
painter = painterResource(id = image),
contentDescription = null,
contentScale = ContentScale.Fit,
modifier = Modifier.fillMaxSize()
)
}
}
}

Answer 1

Replace image container Box with BoxWithConstraints. Then, inside BoxWithConstraintsScope you can check how much space is available for your view, and if you don't have enough - don't display it.
BoxWithConstraints(
modifier = modifier
.background(color = outlineColor, shape = CircleShape)
.padding(outlineSize)
.aspectRatio(ratio = 1f)
) {
if (maxHeight > 200.dp) {
Image(
painter = painterResource(id = image),
contentDescription = null,
contentScale = ContentScale.Fit,
modifier = Modifier.fillMaxSize()
)
}
}
If you wanna hide box background too, move it inside if.
If you want add an animation, replace if (maxHeight > 200.dp) { with AnimatedVisibility(visible = maxHeight > 200.dp) {