Problem using HorizontalPager in Jetpack Compose

Question

Good night for everyone!

In my app, I'm doing a Horizontal Pager, and the following happens:

When I use when inside pageContent, the pages are rendered normally. Code and screenshot are below

Scaffold { paddingValues ->
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)){
            HorizontalPager(
                state = pagerState
            ) {index ->
                when(index){
                    0 -> {
                        BasePresentation(
                            backgroundColor = Color(0xff0C0810),
                            isObliviateIcon = true,
                            color = Color.LightGray,
                            imageIcon = null,
                            text = Strings.presentation
                        )
                    }
                    1 -> {
                        BasePresentation(
                            backgroundColor = Color(0xffEEBA30),
                            isObliviateIcon = false,
                            imageIcon = R.raw.grifinoria,
                            color = Color(0xffA12A32),
                            text = Strings.presentation
                        )
                    }
                }
            }
        }
    }

It turns out that I would like to take these two components of the when block and create them in the form of a list, accessing them via index, something like the code below:

val presentationList = mutableListOf(
        BasePresentation(
            backgroundColor = Color(0xff0C0810),
            isObliviateIcon = true,
            color = Color.LightGray,
            imageIcon = null,
            text = Strings.presentation
        ),
        BasePresentation(
            backgroundColor = Color(0xffEEBA30),
            isObliviateIcon = false,
            imageIcon = R.raw.grifinoria,
            color = Color(0xffA12A32),
            text = Strings.presentation
        ),
    )
    val pagerState = rememberPagerState(initialPage = 0, pageCount = {presentationList.size})

    Scaffold { paddingValues ->
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)){
            HorizontalPager(
                state = pagerState
            ) {index ->
                presentationList[index]
            }
        }
    }

But when I run the code this way, the components simply don't load and I get a white screen in the emulator. By adding println(index) to the pageContent and sliding it on the emulator screen, it is shown that the index changes in the log.

Could you help me with this issue?

The only way that worked was to add the when block. But I would like to use the list

Answer 1

BasePresentation is a composable. You try to store that in a list and retrieve it later on to display at that location. That's not how Compose works though. The declarative nature of Compose expects the composable to be placed where it should be displayed. It has to remain inside HorizontalPager.

What you can do instead is to extract the configuration (that is, the parameters) of BasePresentation into a data class like this (please check that the correct types are used):

data class Presentation(
    val backgroundColor: Color,
    val isObliviateIcon: Boolean,
    val color: Color,
    val imageIcon: Any?,
    val text: String,
)

Now you can create simple objects of that class that represent the configuration of each page and store them in a list:

val presentationList = remember {
    listOf(
        Presentation(
            backgroundColor = Color(0xff0C0810),
            isObliviateIcon = true,
            color = Color.LightGray,
            imageIcon = null,
            text = Strings.presentation,
        ),
        Presentation(
            backgroundColor = Color(0xffEEBA30),
            isObliviateIcon = false,
            imageIcon = R.raw.grifinoria,
            color = Color(0xffA12A32),
            text = Strings.presentation,
        ),
    )
}

Don't forget to remember the list, otherwise it will be recreated on each recomposition. No need for a mutable state though, it's just static configuration that doesn't need to be observed for changes.

Finally, retrieve the appropriate configuration in the pager and call BasePresentation with it:

HorizontalPager(
    state = pagerState,
) { index ->
    with(presentationList[index]) {
        BasePresentation(
            backgroundColor = backgroundColor,
            isObliviateIcon = isObliviateIcon,
            color = color,
            text = text,
            imageIcon = imageIcon,
        )
    }
}