Lists in Compose

LazyColumn,LazyRow,FlowLayouts

Introduction

In this tutorial we will cover LazyColumn,LazyRow,FlowLayouts which are used to effectively display a collection of items.

Lazy List

They are used to display a large number of items or items whose length is undefined. Using layout like column to display such a list can cause performance issues because all items will be composed and laid out whether or not they are visible.

Lazy componets differ from other components because it provides a LazyListScope() block. Which offer a DSL(Domain Specific Language) which allows apps to describe the item contents. The lazy component is then responsible for adding each item’s content as required by the layout and scroll position.

LazyListScope provides a number of functions for describing items in the layout.

• items() adds a single item.

LazyColumn {
    // Add a single item
    item {
        Text(text = "One item")
    }
}

• items(Int) adds multiple items.

LazyColumn {

    // Add 5 items
    items(5) { index ->
        Text(text = "multiple Items: $index")
    }
}

• itemIndexed() which provides the index.

The lazy list component include:

• LazyColumns produce a vertically scrolling list.
• LazyRow produces horizontally scrolling list.

Flow Layout

FlowRows and FlowColums are composables similar to Column and Row. They are used to build responsive layouts (contents will not be cut off if items are too large for one dimention).

The difference is items flow into the next line when container runs out of space which creates multiple rows or columns.

maxItemsInEachRow or maxItemsInEachColumn controlls the number of items.

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}

Items automatically flow to the next row when there is no more space in the first row.

learn more