Manage visibility with Compose UI

Question

i´m new in Compose and i´m trying to manage the visibility of the TopBar when i´m scrolling a list ( LazyColumn ). I´m not pretend to use the Scaffold with Material 3 because I want to learn a bit more about Compose and Animation.

So, first of all, this is my code and it works just fine ->

@Composable
fun FavouriteCompose(stateUi: FavouriteStateUi.ShowMovies) {
    Box(Modifier.fillMaxSize()) {
        val state = rememberLazyListState()
        val firstVisible = remember { derivedStateOf { state.firstVisibleItemIndex } }
        Column(
            Modifier
                .fillMaxSize()
                .background(color = GreenB)
        ) {
            AnimatedVisibility(visible = firstVisible.value == 0) {
                Spacer(modifier = Modifier.height(20.dp))
                Paragraphs.Paragraph(
                    modifier = Modifier.padding(10.dp),
                    stringRes = R.string.favourite,
                    color = Color.White,
                    paragraphSize = Paragraphs.ParagraphSize.PARAGRAPH_24_SP
                )
                Spacer(modifier = Modifier.height(20.dp))
            }
            if (stateUi.movies?.isEmpty() == true) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .padding(top = 10.dp)
                        .fillMaxSize()
                        .clip(RoundedCornerShape(10.dp))
                        .background(Color.White),
                ) {
                    Image(
                        alignment = Alignment.Center,
                        modifier = Modifier.size(200.dp),
                        painter = painterResource(
                            id = R.drawable.ic_baseline_local_movies_24
                        ),
                        contentDescription = ""
                    )
                    Paragraphs.Paragraph(
                        modifier = Modifier
                            .padding(top = 10.dp)
                            .align(Alignment.CenterHorizontally),
                        stringRes = R.string.add_more_movies,
                        paragraphSize = Paragraphs.ParagraphSize.PARAGRAPH_24_SP
                    )
                }
            } else {
                LazyColumn(
                    state = state,
                    modifier = Modifier
                        .fillMaxSize()
                        .clip(RoundedCornerShape(10.dp))
                        .background(Color.White)
                        .padding(10.dp)
                ) {
                    items(
                        items = stateUi.movies.orEmpty(),
                        key = { cardModel -> cardModel.id }
                    ) { item -> MovieCard(item) }
                }
            }
        }
        val snackBarModel = stateUi.snackBarModel
        if (snackBarModel.addOrRemoveMovie == true) {
            Box(
                modifier = Modifier
                    .align(Alignment.BottomEnd)
                    .padding(bottom = 10.dp)
            ) {
                SnackBar(
                    stringRes = R.string.pelicula_removida,
                    icon = R.drawable.ic_baseline_local_movies_24,
                    backgroundColor = Color.Black,
                    textColor = LightGrey,
                    iconColor = Blue,
                    snackBarModel = snackBarModel
                )
            }
        }
    }
}

Each Time i swipe the list the topApp hides and viceversa, but i´m not sure if this is the best way to do this ( without using Scaffold with Material 3 ).

I´m creating more recompositons with this kind of solution ?, should I save the lazy state in a viewModel instead?

Thanks!.

Manage visibility with Compose UI

0 Answers0