Use Compose typed navigation

Author: zsmb13

composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt

@@ -10,7 +10,10 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
+import androidx.navigation.toRoute
+import com.jetbrains.kmpapp.screens.detail.DetailDestination
 import com.jetbrains.kmpapp.screens.detail.DetailScreen
+import com.jetbrains.kmpapp.screens.list.ListDestination
 import com.jetbrains.kmpapp.screens.list.ListScreen
 
 @Composable
@@ -20,16 +23,19 @@ fun App() {
     ) {
         Surface {
             val navController: NavHostController = rememberNavController()
-            NavHost(
-                navController,
-                startDestination = "list"
-            ) {
-                composable("list") {
-                    ListScreen(navController)
+            NavHost(navController = navController, startDestination = ListDestination) {
+                composable<ListDestination> {
+                    ListScreen(navigateToDetails = { objectId ->
+                        navController.navigate(DetailDestination(objectId))
+                    })
                 }
-                composable("detail/{objectId}") { backStackEntry ->
-                    val objectId = backStackEntry.arguments?.getString("objectId")?.toInt()
-                    DetailScreen(navController, objectId!!)
+                composable<DetailDestination> { backStackEntry ->
+                    DetailScreen(
+                        objectId = backStackEntry.toRoute<DetailDestination>().objectId,
+                        navigateBack = {
+                            navController.popBackStack()
+                        }
+                    )
                 }
             }
         }

composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/di/Koin.kt

@@ -12,7 +12,6 @@ import io.ktor.client.plugins.contentnegotiation.ContentNegotiation
 import io.ktor.http.ContentType
 import io.ktor.serialization.kotlinx.json.json
 import kotlinx.serialization.json.Json
-import org.koin.compose.viewmodel.dsl.viewModel
 import org.koin.core.context.startKoin
 import org.koin.core.module.dsl.factoryOf
 import org.koin.dsl.module

composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt

@@ -33,7 +33,6 @@ import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
-import androidx.navigation.NavController
 import com.jetbrains.kmpapp.data.MuseumObject
 import com.jetbrains.kmpapp.screens.EmptyScreenContent
 import io.kamel.image.KamelImage
@@ -48,20 +47,24 @@ import kmp_app_template.composeapp.generated.resources.label_dimensions
 import kmp_app_template.composeapp.generated.resources.label_medium
 import kmp_app_template.composeapp.generated.resources.label_repository
 import kmp_app_template.composeapp.generated.resources.label_title
+import kotlinx.serialization.Serializable
 import org.jetbrains.compose.resources.stringResource
 import org.koin.compose.viewmodel.koinViewModel
 
+@Serializable
+data class DetailDestination(val objectId: Int)
+
 @Composable
 fun DetailScreen(
-    navController: NavController,
     objectId: Int,
+    navigateBack: () -> Unit,
 ) {
     val viewModel = koinViewModel<DetailViewModel>()
 
     val obj by viewModel.getObject(objectId).collectAsState(initial = null)
     AnimatedContent(obj != null) { objectAvailable ->
         if (objectAvailable) {
-            ObjectDetails(obj!!, onBackClick = { navController.navigateUp() })
+            ObjectDetails(obj!!, onBackClick = navigateBack)
         } else {
             EmptyScreenContent(Modifier.fillMaxSize())
         }

composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt

@@ -28,16 +28,19 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.navigation.NavController
 import com.jetbrains.kmpapp.data.MuseumObject
 import com.jetbrains.kmpapp.screens.EmptyScreenContent
 import io.kamel.image.KamelImage
 import io.kamel.image.asyncPainterResource
+import kotlinx.serialization.Serializable
 import org.koin.compose.viewmodel.koinViewModel
 
+@Serializable
+object ListDestination
+
 @Composable
 fun ListScreen(
-    navController: NavController,
+    navigateToDetails: (objectId: Int) -> Unit
 ) {
     val viewModel = koinViewModel<ListViewModel>()
     val objects by viewModel.objects.collectAsState()
@@ -46,9 +49,7 @@ fun ListScreen(
         if (objectsAvailable) {
             ObjectGrid(
                 objects = objects,
-                onObjectClick = { objectId ->
-                    navController.navigate("detail/$objectId")
-                }
+                onObjectClick = navigateToDetails,
             )
         } else {
             EmptyScreenContent(Modifier.fillMaxSize())
@@ -68,7 +69,8 @@ private fun ObjectGrid(
         modifier = modifier
             .fillMaxSize()
             .padding(WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal).asPaddingValues()),
-        contentPadding = WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical).asPaddingValues(),
+        contentPadding = WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical)
+            .asPaddingValues(),
     ) {
         items(objects, key = { it.objectID }) { obj ->
             ObjectFrame(
@@ -102,7 +104,10 @@ private fun ObjectFrame(
 
         Spacer(Modifier.height(2.dp))
 
-        Text(obj.title, style = MaterialTheme.typography.subtitle1.copy(fontWeight = FontWeight.Bold))
+        Text(
+            obj.title,
+            style = MaterialTheme.typography.subtitle1.copy(fontWeight = FontWeight.Bold)
+        )
         Text(obj.artistDisplayName, style = MaterialTheme.typography.body2)
         Text(obj.objectDate, style = MaterialTheme.typography.caption)
     }

gradle/libs.versions.toml

@@ -1,13 +1,13 @@
 [versions]
 agp = "8.6.0"
 androidx-activityCompose = "1.9.2"
-androidx-ui-tooling = "1.7.0"
+androidx-ui-tooling = "1.7.2"
 compose-multiplatform = "1.6.11"
 kamel = "0.9.5"
 koin = "4.0.0"
 kotlin = "2.0.20"
 ktor = "2.3.12"
-navigationCompose = "2.7.0-alpha07"
+navigationCompose = "2.8.0-alpha10"
 
 [libraries]
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }