Creating Jetpack Compose Navigation and Submitting Arguments.

Hello everyone. I'm Tolga Caglayan. Today I'm going to show you with an example how you can work with Jetpack Compose Navigation.Jetpack Compose is an emerging technology. Sometimes we have trouble finding information on how to use certain things. That's why I felt the need to write an article about how to use Navigation.

So let's start.

Sample Application : https://github.com/togisoft/JetpackNavigationExample

• First of all, we add the navigation package to the Jetpack Compose project that we have created.

• Then we create our Folders and Files.

• We create a sealed class for the route in Screen.kt in the State Folder.

sealed class Screen(val route: String) {
    object HomeScreen : Screen(route ="home")
    object DetailScreen : Screen(route = "detail")

    // To send multiple arguments
    fun withArgs(vararg args: String): String {
        return buildString {
            append(route)
            args.forEach { arg ->
                append("/$arg")
            }
        }
    }
}

• We create our codes for HomeScreen

@Composable
fun HomeScreen(navController: NavController) {
    var name by remember { mutableStateOf("") }
    var surname by remember { mutableStateOf("") }
    val context = LocalContext.current

    Scaffold(
        topBar = {
            TopAppBar(title = { Text(text = "Home Screen") })
        }
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                OutlinedTextField(
                    value = name,
                    label = { Text(text = "Name") },
                    onValueChange = { name = it },
                    modifier = Modifier.padding(vertical = 16.dp)
                )
                OutlinedTextField(
                    value = surname,
                    label = { Text(text = "Surname") },
                    onValueChange = { surname = it },
                    modifier = Modifier.padding(vertical = 16.dp)
                )
                Button(onClick = {
                   // Check if textfields are null
                    if (name.isNotEmpty()) {  
//With route arguments for Detail Screen.                  navController.navigate(Screen.DetailScreen.withArgs(name, surname))
                    } else {
                        Toast.makeText(context, "Fill in the required fields.", Toast.LENGTH_SHORT)
                            .show()
                    }
                }) {
                    Text(text = "Send Detail Screen")
                }
            }
        }
    }
}

• We create our codes for DetailScreen

@Composable
fun DetailScreen(name: String?, surname: String?, navController: NavController) {

    Scaffold(
        topBar = {
            TopAppBar(title = { Text(text = "Detail Screen") }, navigationIcon = {
                IconButton(
                    onClick = {
                        navController.popBackStack()
                    }) {
                    Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = "posStackBack")
                }
            })
        }
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Hello $name $surname", fontWeight = FontWeight.Bold)
            }
        }
    }
}

• Now we create the Navigation

@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = Screen.HomeScreen.route) {
        composable(route = Screen.HomeScreen.route) {
            HomeScreen(navController = navController)
        }
        composable(route = Screen.DetailScreen.route + "/{name}/{surname}",
            arguments = listOf(
                navArgument("name") {
                    type = NavType.StringType
                    nullable = false
                },
                navArgument("surname") {
                    type = NavType.StringType
                    nullable = false
                }
            )
        ) { entry ->
            DetailScreen(
                name = entry.arguments?.getString("name"),
                surname = entry.arguments?.getString("surname"),
                navController = navController
            )
        }
    }
}

• We edit our MainActivity file and run the program.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DevToTheme {
                Navigation()
            }
        }
    }
}

*** Final**