Infinite List / Paged List in Jetpack Compose

2 min readJul 3, 2021

Pagination is important in any application containing large datasets. Whether it is from a remote network or from local database.

With the coming of Jetpack Compose, creating lists is now a lot easier than using recycler views and adapters. You can find more information about lists in Compose here.

Jetpack Paging library supports Compose and official documentation is also provided here. This will be the solution if you are already using paging library, but what if one don’t want to use that? There is a short and easy way to achieve our functionality.

We will be implementing paging to the below code.

Creating a LazyListState will be required as it contains information about currently visible items and other metadata.

Step 1

Create an extension function for LazyListState, with parameter

loadMore — the function which will be invoked when we reach at the bottom of the list.

Step 2

Create a State object which tells us if we should load more or not. See State, remember, derivedStateOf for detailed information.

Step 3 — Final

Now, we convert shouldLoadMore state into a cold flow using the snapshotFlow and collect its value. See Side Effects for detailed information.

And our reusable extension function is now ready to use.

Usage

Simply call the function on the listState attached to the LazyColumn.

Buffer

In case we need to start loading more before we reach the bottom of the list (to provide a much smoother experience), we can add a buffer to our extension function like below.

And our infinite scrolling / paged list is now ready in compose.

Ending Notes

The function created without the buffer will be perfectly fine even when adding sticky headers, other elements, etc. in your list

But when using the buffer version of the function, one must be aware that the total items in the lazy list state, will also include the headers or other elements (if added), apart from the list items.