Container Transform - Animation

container_transform_animation.kt

@Composable
fun MorphingFab(modifier: Modifier = Modifier) {
    val users = remember { mutableStateListOf<User>() }
    // 1
    var showDialog by remember { mutableStateOf(false) }
    // 2
    SharedTransitionLayout(
        modifier = Modifier
            .fillMaxSize(),
    ) {
        Box(modifier = modifier) {
            UserList(
                users = users,
                modifier = Modifier.fillMaxSize(),
            )
            // 3
            AnimatedContent(
                targetState = showDialog,
                modifier = modifier,
                label = "morphing_fab",
            ) { addingUser ->
                // 4
                if (addingUser) {
                    Box {
                        // 5
                        InputBox(
                            onAddUser = {
                                users.add(it)
                                showDialog = false
                            },
                            // 6
                            onCancel = { showDialog = false },
                            modifier = Modifier
                                .align(Alignment.Center)
                                .width(320.dp)
                                .shadow(elevation = 4.dp)
                                // 7
                                .sharedBounds(
                                    sharedContentState = rememberSharedContentState(key = "fab"),
                                    animatedVisibilityScope = this@AnimatedContent,
                                ),
                        )
                    }
                } else {
                    // 8
                    Box {
                        FloatingActionButton(
                            modifier = Modifier
                                .align(Alignment.BottomEnd)
                                .padding(all = 16.dp)
                                // 9
                                .sharedBounds(
                                    sharedContentState = rememberSharedContentState(key = "fab"),
                                    animatedVisibilityScope = this@AnimatedContent,
                                ),
                            onClick = {
                                // 10
                                showDialog = true
                            }
                        ) {
                            Icon(
                                imageVector = Icons.Default.Add,
                                contentDescription = "Add",
                            )
                        }
                    }
                }
            }
        }
    }
}