add type navigation nsample

Author: SmartToolFactory

Tutorial3-1Navigation/build.gradle.kts

@@ -50,6 +50,7 @@ dependencies {
     implementation(libs.androidx.compose.ui)
     implementation(libs.androidx.compose.ui.graphics)
     implementation(libs.androidx.compose.ui.tooling.preview)
+    implementation(libs.androidx.compose.material)
     implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.navigation.compose)
     implementation(libs.kotlinx.serialization.json)

Tutorial3-1Navigation/src/main/java/com/smarttoolfactory/tutorial3_1navigation/ExposedSectionMenu.kt

@@ -0,0 +1,74 @@
+@file:OptIn(ExperimentalMaterialApi::class)
+
+package com.smarttoolfactory.tutorial3_1navigation
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.DropdownMenuItem
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.ExposedDropdownMenuBox
+import androidx.compose.material.ExposedDropdownMenuDefaults
+import androidx.compose.material.Text
+import androidx.compose.material.TextField
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ExposedSelectionMenu(
+    title: String,
+    index: Int,
+    options: List<String>,
+    onSelected: (Int) -> Unit,
+) {
+
+    var expanded by remember { mutableStateOf(false) }
+    var selectedOptionText by remember { mutableStateOf(options[index]) }
+
+    ExposedDropdownMenuBox(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 4.dp),
+        expanded = expanded,
+        onExpandedChange = {
+            expanded = it
+        }
+    ) {
+
+        TextField(
+            modifier = Modifier.fillMaxWidth(),
+            readOnly = true,
+            value = selectedOptionText,
+            onValueChange = { },
+            label = { Text(title) },
+            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
+            colors = ExposedDropdownMenuDefaults.textFieldColors()
+        )
+        ExposedDropdownMenu(
+            modifier = Modifier.fillMaxWidth(),
+            expanded = expanded,
+            onDismissRequest = {
+                expanded = false
+
+            }
+        ) {
+            options.forEachIndexed { index: Int, selectionOption: String ->
+                DropdownMenuItem(
+                    modifier = Modifier.fillMaxWidth(),
+                    content = {
+                        Text(text = selectionOption)
+                    },
+                    onClick = {
+                        selectedOptionText = selectionOption
+                        expanded = false
+                        onSelected(index)
+                    }
+                )
+            }
+        }
+    }
+}

Tutorial3-1Navigation/src/main/java/com/smarttoolfactory/tutorial3_1navigation/MainActivity.kt

@@ -1,16 +1,16 @@
+@file:OptIn(ExperimentalMaterial3Api::class)
+
 package com.smarttoolfactory.tutorial3_1navigation
 
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.material3.Surface
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import com.smarttoolfactory.tutorial3_1navigation.ui.theme.ComposeTutorialsTheme
 
 class MainActivity : ComponentActivity() {
@@ -19,29 +19,15 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             ComposeTutorialsTheme {
-                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
-                    Greeting(
-                        name = "Android",
+                Scaffold { innerPadding ->
+                    Surface(
                         modifier = Modifier.padding(innerPadding)
-                    )
+                    ) {
+                        TypeSafeNavigationTutorial()
+                    }
                 }
             }
         }
     }
 }
 
-@Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Text(
-        text = "Hello $name!",
-        modifier = modifier
-    )
-}
-
-@Preview(showBackground = true)
-@Composable
-fun GreetingPreview() {
-    ComposeTutorialsTheme {
-        Greeting("Android")
-    }
-}

Tutorial3-1Navigation/src/main/java/com/smarttoolfactory/tutorial3_1navigation/Routes.kt

@@ -0,0 +1,24 @@
+package com.smarttoolfactory.tutorial3_1navigation
+
+import kotlinx.serialization.Serializable
+
+
+// Define a home route that doesn't take any arguments
+@Serializable
+object Home
+
+// Define a profile route that takes an ID
+@Serializable
+data class Profile(val id: String)
+
+@Serializable
+object RouteA
+
+@Serializable
+object RouteB
+
+@Serializable
+object RouteC
+
+@Serializable
+object RouteD

Tutorial3-1Navigation/src/main/java/com/smarttoolfactory/tutorial3_1navigation/Tutorial1TypeSafeNavigation.kt

@@ -0,0 +1,83 @@
+package com.smarttoolfactory.tutorial3_1navigation
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavBackStackEntry
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import androidx.navigation.toRoute
+
+@Composable
+fun TypeSafeNavigationTutorial() {
+
+    val navController = rememberNavController()
+    NavHost(
+        navController = navController,
+        startDestination = Home
+    ) {
+
+        composable<Home> {
+            HomeScreen {
+                navController.navigate(
+                    route = it
+                )
+            }
+        }
+
+        composable<Profile> { navBackStackEntry: NavBackStackEntry ->
+            val profile: Profile = navBackStackEntry.toRoute<Profile>()
+            ProfileScreen(profile)
+        }
+    }
+}
+
+@Composable
+private fun HomeScreen(
+    onClick: (Profile) -> Unit,
+) {
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        val list = remember {
+            List(20) {
+                Profile(it.toString())
+            }
+        }
+
+        LazyColumn(
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            items(list) {
+                Row(
+                    modifier = Modifier.fillMaxWidth().clickable {
+                        onClick(it)
+                    }
+                ) {
+                    Text("Profile ${it.id}")
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun ProfileScreen(profile: Profile) {
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        Text("Profile: ${profile.id}")
+    }
+}