IssueTracker

• ConstraintLayout version: constraintlayout-compose:1.1.0-alpha12

• Jetpack Compose version: 1.6.0-alpha04

• Jetpack Compose component used: ConstraintLayout

• Android Studio Build: Android Studio Giraffe | 2022.3.1 Build #AI-223.8836.35.2231.10406996, built on June 29, 2023 Runtime version: 17.0.6+0-17.0.6b829.9-10027231 aarch64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.

• Kotlin version: 1.9.10

• Material Version: material3:1.2.0-alpha06

This is a regression issue, latest version of constraintlayout-compose which worked well: 1.1.0-alpha05

Steps to Reproduce or Code Sample to Reproduce:

1. Create a ConstraintLayout with 2 ComposeViews inside
2. Show one ComposeView or another depending on a flag
3. Change visibility of these views depending on this flag (visibility = if (!detailVisible) Visibility.Gone else Visibility.Visible)
4. The ComposeView not visible the first time with the width = Dimension.fillToConstraints property causes the other ComposeView not to be shown on the screen

Sample Code

@Composable
fun MainContent() {
    var detailVisible by rememberSaveable { mutableStateOf(false) }
    ConstraintLayout(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxSize()
            .clickable { detailVisible = !detailVisible },
    ) {
        val (titleRef, detailRef) = createRefs()
        Text(
            text = "Text 1 - Detail",
            modifier = Modifier.constrainAs(detailRef) {
                start.linkTo(parent.start)
                width = Dimension.fillToConstraints
                visibility = if (!detailVisible) Visibility.Gone else Visibility.Visible
            },
        )
        Text(
            text = "Text 2",
            modifier = Modifier
                .constrainAs(titleRef) {
                    width = Dimension.fillToConstraints
                    visibility = if (detailVisible) Visibility.Gone else Visibility.Visible
                },
        )
    }
}

Here you can find a sample project to reproduce it: https://github.com/jarroyoesp/ConstraintLayoutIssue

And this issue just happens in case we use Visibility.Gone. If we use Visibility.Invisible it works well.

Temporary Fix

We find a possible fix. If we only set width to Dimension.fillToConstraints and in other case we set to Dimension.wrapContent, all the ComposeViews are shown when is their time.

Text(
    text = ...,
    modifier = Modifier.constrainAs(detailRef) {
        ....
        width = if (!detailVisible) Dimension.wrapContent else Dimension.fillToConstraints
        visibility = if (!detailVisible) Visibility.Gone else Visibility.Visible
    },
)