Is this a Compose bug that the top-left corner is removed during animation?

# compose

[Mehdi Haghgoo]

Is this a Compose bug that the top-left corner is removed during animation?

Screen Recording 2021-05-27 at 4.14.53 AM.mov

[taponidhi]

Share your composable. You must be applying modifiers in wrong order.

[Zach Klippenstein (he/him) [MOD]]

Yea hard to say without seeing your code

[Mehdi Haghgoo]

OK, here's my code:

// A surface container using the 'background' color from the theme
        Surface(color = MaterialTheme.colors.background) {
            var clicked by remember{mutableStateOf(false)}
            val offset =  animateDpAsState(targetValue = if (clicked) 30.dp else 0.dp)
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
                modifier = Modifier.fillMaxSize()
            ){
                Box(
                    Modifier
                        .clip(RoundedCornerShape(topStart = offset.value))
                        .clickable {
                            clicked = !clicked
                        }
                        .size(200.dp)
                        .background(Color.Yellow)
                        .border(1.dp, Color.Red)
                ) {
                    Text(buildAnnotatedString {
                        AnnotatedString("Hello Compose", spanStyle = SpanStyle(color = Color.Black, fontSize = 50.sp))
                    })
                }
                AnimatedVisibility(clicked) {
                    Box(Modifier.background(Color.Green)){
                        Text("Welcome to Jetpack Compose")
                    }
                }
            }
        }
    }
}

[Zach Klippenstein (he/him) [MOD]]

Just what I thought – you’re clipping the component by the shape, but not telling the border about the shape. You’ll want to pass your clip shape into the border modifier as well i think