Your Second Kotlin Android App

You have already created the TaskDetailScreen composable. In this episode, you’ll add this to your navigation graph and navigate to it from the TaskListScreen.

Head over to AppNavHost.kt file. Inside the AppNavHost composable, below the TaskListScreen composable definition, add the following code:

composable(Screens.TaskDetailScreen.route) {
    TaskDetailScreen()
}

This code adds the TaskDetailScreen composable to the navigation graph. You’re using the Screens.TaskDetailScreen.route property to define the route to the TaskDetailScreen composable.

Next, head over to TaskListScreen.kt. Add the following parameter to the TaskListScreen composable:

navigate: (String) -> Unit

This parameter is a lambda that takes a string as a parameter and returns nothing. You’ll use this parameter to navigate to the TaskDetailScreen composable.

Now you need to invoke this lambda in two places: one is when the user clicks on the ListItemView composable and the other is when the user adds a new task. Navigate to TaskListScreen and replace the // TODO navigate to the tasks details screen with:

navigate(taskName)

Here, you’re passing the taskName to the navigate lambda. This will navigate to the TaskDetailScreen composable. Additionally, add the following method inside your floatingActionButton onFabClick lambda:

navigate(it)

Here, you’re passing the taskName to the navigate lambda. This will navigate to the TaskDetailScreen composable.

Lastly, you need to pass the navigate lambda to the TaskListScreen composable.

Navigate to AppNavHost.kt.

Add the following parameter to the TaskListScreen composable:

navigate = { taskListName ->
    navController.navigate(Screens.TaskDetailScreen.route)
}

In this code, you’re passing a lambda to the navigate parameter. Inside the lambda, you’re navigating to the Screens.TaskDetailScreen.route route by calling the navigate method on the navController. This will navigate to the TaskDetailScreen composable.

Build and run the app. Tapping on any task will navigate to the TaskDetailScreen composable. You can also add a new task and it will navigate to the TaskDetailScreen composable. However, the TaskDetailScreen is empty.