1

I'm trying to make a swipe to reveal component using compose, but I want the width of the card that will appear after the swipe to grow to the size of the wrap content without using it, but I don't understand how to calculate the wrap content size.

var width by remember {
        mutableStateOf(0.dp)
    }
    val lowerTransition = updateTransition(transitionState, "lowerCardTransition")
    val lowerOffsetTransition by lowerTransition.animateFloat(
        label = "lowerCardOffsetTransition",
        transitionSpec = { tween(durationMillis = ANIMATION_DURATION) },
        targetValueByState = { if (isRevealed) width.value else 0f },

)

How do I equate the width value used here to the wrap content value?

enter image description here I'm trying to make the resulting delete button appear all without using a constant value

HAN-007
  • 52
  • 5
  • Does this answer your question? [How to animate width of a button in Jetpack Compose](https://stackoverflow.com/questions/62376589/how-to-animate-width-of-a-button-in-jetpack-compose) – fstanis Jan 08 '23 at 13:49
  • Unfortunately this didn't work for me.it doesn't match what i'm trying to do – HAN-007 Jan 08 '23 at 13:58
  • This depends on if you have your Card Composable in composition with a width before animation. If so, you can use BoxWithConstraints or Modifier.onSizeChanged. If you need to get size of a Composable before it's laid out you can use Layout or SubcomposeLayout to get actual width. https://stackoverflow.com/questions/73771803/get-information-about-size-before-is-drawn-in-compose/73802696#73802696, this one measures button before it's in composition https://stackoverflow.com/questions/73705519/how-to-adjust-size-of-component-to-its-child-and-remain-unchanged-when-its-chi/73706182#73706182 – Thracian Jan 08 '23 at 14:05
  • I think SubcomposeLayout will work for me, I will understand and apply – HAN-007 Jan 08 '23 at 14:36

1 Answers1

1

Try using AnimatedVisibility. For demo purpose I used OnClick, replace it with OnSwipe.

@Preview
@Composable
fun AnimateVisibility2() {
    var visible by remember {
        mutableStateOf(false)
    }
    Row(
        modifier = Modifier.fillMaxSize(), horizontalArrangement = Arrangement.Center
    ) {
        AnimatedVisibility(
            visible = visible, enter = expandHorizontally(), exit = shrinkHorizontally()
        ) {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(Icons.Default.Phone, contentDescription = null)
            }
        }

        Button(onClick = { visible = !visible }, Modifier.weight(1f)) {
            Text("Click Me")
        }
    }
}
SURYA S R
  • 320
  • 8