In today’s tutorial, we will learn how to build a ListView LazyColumn in Kotlin Compose Multiplatform KMP KMM for both Android & iOS platfroms. The LazyColumn is optimized in the same way as the RecyclerView component we have used in native Android (Java). This tutoiral covers the basics of LazyColumn using static data handling.

ListView LazyColumn in Kotlin Compose Multiplatform KMP KMM:

LazyColumn is a component in Kotlin Compose Multiplatform that allows us to build a ListView in a memory-efficient and optimized way. It loads items only when they are visible on the screen and assigns memory to them accordingly. This will ensure fast loading and better performance with a large number of datasets.

Start coding for the app:

1. Data Model:

First, we need to create a data model class that stores information for each item in the ListView. For this example, each item has an ID, title, subtitle, and a tag.

2. Creating dummy list data:

After creating the data model, we need to populate it with dummy data.

3. Creating selected state: We will be creating a state named selected. This state is used to hold the item object selected from the List.

4. Creating TopAppBar: To create an application App bar, we will use the TopAppBar component.

5. Creating LazyColumn: LazyColumn is our main component for today’s tutorial.

Code explanation:

1. modifier = Modifier.fillMaxSize().padding(vertical = 8.dp): The LazyColumn is stretched to fill the available space with some vertical padding for spacing between items.
2. itemsIndexed(items, key = { _, item -> item.id }): This function renders each item in the list using its index and the item.id as the unique key. It is important for performance, as it helps Jetpack Compose efficiently manage and update the list when items change.
3. ListRow: For each item in the list, we use the ListRow Composable to render the content.
4. if (index < items.lastIndex) { Divider() }: A Divider is added between items, but not after the last item. This ensures the divider only separates the items in the list.

6. Creating AlertDialog: The alert dialog is used to show the selected item on the app screen when the user taps on the item.

Code explanation:

1. onDismissRequest = { selected = null }: When the user taps outside the dialog or presses the back button, the selected item is cleared, closing the dialog.
2. Title, text, and confirmButton: The dialog displays the title, subtitle, and tag of the selected item, and a button labeled “OK” to dismiss the dialog.
3. backgroundColor: Sets the background color of the dialog.
4. contentColor: Defines the color of the text inside the dialog.

7. Creating LazyColumn Item Layout:

This is the layout for each individual item (or ListRow) in the list.

Code explanation:

1. Row: A Row is used to arrange the contents horizontally (Image, Title, Subtitle, and Tag).
2. modifier = Modifier.fillMaxWidth(): The row stretches to fill the full width of the parent.
3. clickable { onClick() }: This makes the row clickable. When clicked, the onClick function is triggered, and the selected item is passed back.
4. padding(horizontal = 16.dp, vertical = 12.dp): Adds padding inside the row for better spacing.
5. Image: Displays an image next to the item. The image is circular because of the clip(CircleShape) modifier.
6. painter = painterResource(Res.drawable.demo_image): This line loads the image resource for the item.
7. size(40.dp): The image size is set to 40×40 dp.
8. Column: The title and subtitle of the item are displayed vertically inside a Column.
9. text = item.title: Displays the item’s title.
10. text = item.subtitle: Displays the item’s subtitle in gray color.
11. Surface: The tag is displayed inside a rounded rectangular box using a Surface:
12. modifier = Modifier.width(84.dp).height(32.dp): The width and height of the tag are fixed, ensuring consistency in the design.
13. Box(contentAlignment = Alignment.Center): Ensures that the text inside the tag is centered both horizontally and vertically.
14. Text(text = item.tag): Displays the tag value inside the box.

Complete Source Code for App.kt file:

Screenshot on an Android device:

Screenshot on an iOS device: