How to handle missing/"gone" view when using Compose ConstraintLayout

Question

I'm trying to use the Jetpack Compose ConstraintLayout, and if all the views are visible, it is working great. But if one of these views is missing, the sandcastle falls down.

For example, if a view is optional, I would manage it this way :

val (text1, text2) = createRefs()

ConstraintLayout {
    if (myTextStr.isNotEmpty()) {
        Text(
            text = myTextStr,
            modifier = Modifier
                .constrainAs(text1) {
                    start.linkTo(parent.start)
                    bottom.linkTo(parent.bottom)
                })
    }
    Text(
        text = myTextStr2,
        modifier = Modifier
            .constrainAs(text2) {
                start.linkTo(parent.start)
                bottom.linkTo(text1.top)
            })
}

But then all the layout is broken if the first Text element is missing, since the second Text position is depending on it.

One possibility is to keep the Text view, but setting the height to 0.dp if the myTextStr is null or empty. But I wanted to be sure that the Compose ConstraintLayout is not offering a cleaner way to achieve this

Answer 1

Have you tried the visibility property inside the constrainAs.

// ...
Modifier
  .constrainAs(title) { 
      bottom.linkTo(profilePic.top, margin = 16.dp) 
      start.linkTo(parent.start) 
      visibility = if (isTitleVisible) Visibility.Visible else Visibility.Gone 
}
// ...