How to make a LazyRow of elements that occupy each the whole screen width?

Viewed 1529

The following doesn't work. When I scroll, the width of the first panel fluctuates.

compose version = 1.0.0-beta01

@Composable
fun Carousel() {
    val panels = listOf(Pair("cat", Color.Blue), Pair("dog", Color.Cyan), Pair("snake", Color.Green))

    LazyRow(
        modifier = Modifier
            .fillMaxSize()
    ) {
        items(panels) { panel ->
            Column(
                modifier = Modifier
                    .fillParentMaxSize()
                    .background(panel.second),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = panel.first
                )
            }
        }
    }
}
2 Answers

Replace fillParentMaxSize() with fillParentMaxWidth() and it will work as expected.

Related