Animated lazycolumn in jetpack compose with one click

•  Step 1
  
  
  

  var items by remember {
      mutableStateOf(
          listOf(
              "kotlin",
              "java",
              "roshan",
              "mukesh",
              "Go",
              "long"
          )
      )
  }
  LazyColumn(verticalArrangement = Arrangement.spacedBy(12.dp)) {
      items(items = items, key = { it }) { item ->
          Modifier
              .fillMaxWidth() // Fill the width of the parent
              .background(Color.LightGray.copy(0.2f)) // Apply a light gray background
              .padding(24.dp) // Padding around the text
          Text(
              text = "I love $item",
              fontSize = MaterialTheme.typography.displaySmall.fontSize,
              fontWeight = FontWeight.Bold,
              modifier = Modifier.animateItem(
                  fadeInSpec = tween(durationMillis = 300),   // Fade-in animation with 300ms duration
                  fadeOutSpec = tween(durationMillis = 300),  // Fade-out animation with 300ms duration
                  placementSpec = tween(durationMillis = 600) // Placement animation with 600ms duration
              )
          )
  
      }
      item {
          Button(modifier = Modifier
              .fillMaxWidth()
              .padding(24.dp),
              onClick = { items = items.shuffled() }) {
              Text(text = "Click Me")
          }
      }
  
  }
  
  

• Screenshot below :-