fvilarino

@Composable
fun SharedTransitionScope.ListScreen(
    animatedVisibilityScope: AnimatedVisibilityScope,
    onItemClick: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier,
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(all = 16.dp),

fvilarino

            composable(
                route = "details/{url}"
            ) { backstackEntry ->
                val encoded = backstackEntry.arguments?.getString("url") ?: error("No URL")
                val url = URLDecoder.decode(encoded, "UTF-8")
                DetailsScreen(
                    url = url,
                    animatedVisibilityScope = this@composable,
                    onClick = { navController.popBackStack() },
                    modifier = Modifier.fillMaxSize(),

fvilarino

@Composable
// 1
fun SharedTransitionScope.DetailsScreen(
    url: String,
    // 2
    animatedVisibilityScope: AnimatedVisibilityScope,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(

fvilarino

            composable(
                route = "list"
            ) {
                ListScreen(
                    // 1
                    animatedVisibilityScope = this@composable,
                    onItemClick = { item ->
                        val encoded = URLEncoder.encode(item, "UTF-8")
                        navController.navigate("details/$encoded")
                    },

fvilarino

@Composable
// 1
fun SharedTransitionScope.ListScreen(
    // 2
    animatedVisibilityScope: AnimatedVisibilityScope,
    onItemClick: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier,

fvilarino

@Composable
fun Home(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    // 1
    SharedTransitionLayout(
        modifier = modifier,
    ) {
        NavHost(
            navController = navController,
            startDestination = "list",

fvilarino

[versions]
navigationCompose = "2.8.0-alpha07"
uiCompose = "1.7.0-alpha07"
animationCompose = "1.7.0-alpha07"
foundationCompose = "1.7.0-alpha07"

[libraries]
androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
androidx-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "uiCompose" }
androidx-animation = { group = "androidx.compose.animation", name = "animation", version.ref = "animationCompose" }

fvilarino

@Composable
fun Home(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "list", modifier = modifier) {
        composable(
            route = "list"
        ) {
            ListScreen(
                onItemClick = { item ->
                    val encoded = URLEncoder.encode(item, "UTF-8")

fvilarino

@Composable
fun DetailsScreen(
    url: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier
            .clickable(
                interactionSource = remember { MutableInteractionSource() },

fvilarino

@Composable
fun ListScreen(
    onItemClick: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier,
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(all = 16.dp),
    ) {