Animating Composables (animateDpAsState)

For this Series, We're going to animate the size of a box based on changing sizes.
We'll try to create something like a size palette.

This follows same procedure as animateColorAsState but here we specify a Dp instead.

// --> 1
 val realCardSize = remember {
        mutableStateOf(100)
    }

//-->2
    val stateCardSize = animateDpAsState(targetValue = realCardSize.value.dp )


// --> 3
    Column(modifier = Modifier.fillMaxSize()) {
        Card(
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .padding(10.dp)
                .size(stateCardSize.value),
            backgroundColor = Green,
            elevation = 3.dp
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(text = "Current Size : ", modifier = Modifier.align(Alignment.Center))
            }
        }

// --> 4
        val cardSizes = listOf(100, 300, 500)

Declare the size of the box as an Integer(this could also be in Dp primarily so there's no need for conversion)
Define animateDpAsState variable and give it a targetValue of realCardSize
Here we create a Column parent view to host the Card and the list of size buttons.
We then declare a list of sizes we want the Box to take.

Let's now build the Chips sizeButtonItems at the bottom of the card

@ExperimentalMaterialApi
@Composable
fun ChipSizeItem(
    index: Int,
    isChecked: Boolean,
    size: Int,
    onChecked: (index: Int, size: Int) -> Unit
) {

// --> 5
    val chipColour = animateColorAsState(targetValue = if (isChecked) Green else White)
    Card(
        backgroundColor = chipColour.value,
        elevation = 3.dp,
        shape = RoundedCornerShape(100),
        modifier = Modifier.padding(5.dp).toggleable(value = isChecked,onValueChange = {
           // --> 6
            onChecked(index, size)
        })
    ) {
        Text(text = "$size.dp", modifier = Modifier.padding(horizontal = 20.dp, vertical = 5.dp))
    }
}

Set the chip Color based on the current selected chip size.
Return the index and size of the box when a chip is selected.

// --> 7

        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
            var currentIndex by remember {
                mutableStateOf(0)
            }

            cardSizes.forEachIndexed { cardIndex, cardSize ->
                ChipSizeItem(
                    index = cardIndex,
                    isChecked = cardIndex == currentIndex,
                    size = cardSize
                ) { index, size ->
                    currentIndex = index
                    realCardSize.value = size
                }
            }
        }