ListToDetails.kt

//settings.gradle.kts

dependencyResolutionManagement {
    repositories {
        maven { url = uri("https://androidx.dev/snapshots/builds/11670047/artifacts/repository/") }
        google()
        mavenCentral()
        maven(url = "https://plugins.gradle.org/m2/")
        maven(url = "https://maven.pkg.jetbrains.space/public/p/compose/dev")
    }
}

//build.gradle.kts

dependencies {

   implementation("androidx.compose.animation:animation:1.7.0-SNAPSHOT")
   implementation("androidx.compose.ui:ui:1.7.0-SNAPSHOT")
}










fun ListToDetailsDemo(modifier: Modifier = Modifier) {
    var state: Screen by remember {
        mutableStateOf(Screen.List)
    }
    val images = listOf(
        R.drawable.flower,
        R.drawable.storm,
        R.drawable.tree,
    )
    SharedTransitionLayout(modifier = modifier.fillMaxSize()) {
        AnimatedContent(
            state,
            label = "",
            contentKey = { it.javaClass },
            transitionSpec = {
                if (initialState == Screen.List) {
                    slideInHorizontally { -it } + fadeIn() togetherWith slideOutHorizontally { it } + fadeOut()
                } else {
                    slideInHorizontally { it } + fadeIn() togetherWith slideOutHorizontally { -it } + fadeOut()
                }
            },
        ) {
            when (it) {
                Screen.List -> {
                    LazyColumn {
                        items(50) { item ->
                            Row(
                                modifier = Modifier
                                    .clickable(
                                        interactionSource = remember { MutableInteractionSource() },
                                        indication = null,
                                    ) {
                                        state = Screen.Details(item)
                                    }
                                    .fillMaxWidth(),
                            ) {
                                Image(
                                    painter = painterResource(images[item % 3]),
                                    modifier = Modifier
                                        .size(100.dp)
                                        .then(
                                            Modifier.sharedElement(
                                                rememberSharedContentState(
                                                    key = "item-image$item",
                                                ),
                                                this@AnimatedContent,
                                            )
                                        ),
                                    contentScale = ContentScale.Crop,
                                    contentDescription = null,
                                )
                                Spacer(Modifier.size(15.dp))
                                Text("Item $item")
                            }
                        }
                    }
                }

                is Screen.Details -> {
                    val item = it.item
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .clickable(
                                interactionSource = remember { MutableInteractionSource() },
                                indication = null,
                            ) {
                                state = Screen.List
                            },
                    ) {
                        Image(
                            painter = painterResource(images[item % 3]),
                            modifier = Modifier
                                .then(
                                    Modifier.sharedElement(
                                        rememberSharedContentState(key = "item-image$item"),
                                        this@AnimatedContent,
                                    ),
                                )
                                .fillMaxWidth(),
                            contentScale = ContentScale.Crop,
                            contentDescription = null,
                        )
                        Text(
                            "Item $item",
                            fontSize = 23.sp,
                        )
                    }
                }
            }
        }
    }
}