LazyColumn With Multi-Header In Jetpack Compose.

Photo by Kelly Sikkema on Unsplash

In this article we will see how to make multiple headers for Lazy Column in Jetpack compose.

As you can see in the above video , we have a list of items , and all the items have a type (Animal , Flower, Furniture). We will arrange all the items according to their types and also see show/hide the items.

data class Item(
    val id: Int,
    val name: String,
    val type: String
)

val itemList = listOf(
    Item(
        1, "Tiger", "Animal"
    ),
    Item(
        2, "Lion", "Animal"
    ),
    Item(
        3, "Deer", "Animal"
    ),
    Item(
        4, "Lotus", "Flower"
    ),
    Item(
        5, "Sunflower", "Flower"
    ),
    Item(
        6, "Rose", "Flower"
    ),
    Item(
        7, "Table", "Furniture"
    ),
    Item(
        8, "Chair", "Furniture"
    ),
    Item(
        9, "Bed", "Furniture"
    ),
    Item(
        10, "Monkey", "Animal"
    ),
)

First we defined the list of data with their type…

@Composable
fun LazyColumnWithMultiHeaderScreen(
    modifier: Modifier
) {

    // a mutable map variable , which indicate that item is visible or not
    var isShow = remember {…