Animated Visibility expand and shrink behaviour

Viewed 72

Is there a way where I can make AnimatedVisibility to be scrollable without being part of LazyColumn as an item, so it can be visible from all of nav destination, so when I navigate to second screen, the Dynamic part to shrink and also when I scroll on first screen, to shrink as it is item of LazyColumn

@Composable
fun ExampleBehaviour() {
val scaffoldState = rememberScaffoldState()
val lazyListState = rememberLazyListState()

val navController = rememberAnimatedNavController()

val customNav: () -> Unit = {
    navController.navigate("2")
}

val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route


Scaffold(
    scaffoldState = scaffoldState,
    topBar = {

        AnimatedVisibility(
            visible = currentRoute == "1" || currentRoute == null,
            enter = expandVertically(tween(300)),
            exit = shrinkVertically(tween(300)),
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(80.dp)
                    .background(color = Color.Cyan)
            ) {
                Text("Dynamic part")
            }
        }
    },
    content = {
        AnimatedNavHost(navController = navController, startDestination = "1") {
            composable("1",
                enterTransition = { slideInHorizontally { -1000 } },
                exitTransition = { slideOutHorizontally { 1000 } }) {
                LazyColumn(state = lazyListState) {
                    items(50) {
                        Column(
                            Modifier
                                .fillMaxWidth()
                                .wrapContentHeight()
                                .padding(start = 20.dp, top = 10.dp, bottom = 10.dp)
                                .clickable { customNav() }
                        ) {
                            Text(text = "Row ${it + 1}")
                            Divider(
                                color = Color.Gray,
                                thickness = 1.dp
                            )
                        }
                    }
                }
            }

            composable("2",
                enterTransition = { slideInHorizontally { 1000 } },
                exitTransition = { slideOutHorizontally { -1000 } }) {
                Column(
                    Modifier
                        .fillMaxSize()
                        .background(color = Color.DarkGray),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Text(text = "Content text 2")
                }
            }
        }
    }
)

}

0 Answers
Related