Your Second Kotlin Android App

You can already see a list of your todos. In this challenge, you’ll create the TaskDetailScreenContent which is very similar to TaskListScreen which you created earlier in the course.

Create a new file inside the views package named TaskDetailScreen.kt. Inside the file, create a new composable named TaskDetailScreenContent that takes in two parameters: a modifier and a list of strings to represent your task todos.

Add a conditional statement that checks if the list of task todos is empty. If the list is empty, display the EmptyView composable that says “No todos for this task yet”. If the list is not empty, display a LazyColumn composable that uses the ListItemView Composable to display the list of todos.

Pause the video and attempt the challenge.

Welcome back! Hope you had fun with the challenge. Here’s a quick demo of what you should have done.

Start by creating a file named TaskDetailScreen.kt inside the views package. Inside the file, create a new composable named TaskDetailScreenContent that takes in two parameters: a modifier and a list of strings to represent your task todos.

@Composable
fun TaskDetailsScreenContent(
    modifier: Modifier,
    taskTodos: List<String>
) {
    
}

Next, inside the TaskDetailScreenContent add:

if (taskTodos.isEmpty()) {
    EmptyView(message = stringResource(id = R.string.text_no_todos))
} else {
}

Create a string resource named text_no_todos with the value No todos for this task yet. In this code, you’re checking if the list of task todos is empty. If the list is empty, display the EmptyView composable that says “No todos for this task yet”.

Next, add the following code inside the else block:

LazyColumn(
    modifier = modifier,
    content = {
        items(taskTodos) {
            ListItemView(
                value = it,
                onClick = { }
            )
        }
    }
)

In the code above, you’re displaying a LazyColumn composable that contains a items composable. The items composable takes in a list of items and a composable function that represents each item. Inside the items composable, display a ListItemView composable. You’re passing an empty lambda to the onClick parameter of the ListItemView composable because you’re not going to implement the functionality.

Congratulations on being able to create the TaskDetailScreenContent composable!