Passing Data with Serializable: Navigation with Arguments in Jetpack Compose 🚀

Before we dive in, be sure to check out my previous post on basic screen navigation in Jetpack Compose! Now, let’s explore how to pass data between screens using Serializable.

Suppose we want to input data in Screen A (like a name and age) and retrieve it in Screen B. Here’s a structured way to achieve this:

The folder structure will be same as follows

Step 1: Define Routes with Serializable Data Classes

Instead of creating simple objects for each screen, let’s define a data class to hold any parameters we want to pass to Screen B.

@Serializable
object ScreenA

@Serializable
data class ScreenB(
    val name: String?,
    val age: Int
)

Step 2: Set Up the NavController with Parameters

Within the navigation host, we’ll configure our routes so Screen B can accept arguments:

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = ScreenA) {
        composable<ScreenA> { ScreenAUI(navController) }
        composable<ScreenB> {
            val name = it.arguments?.getString("name")
            val age = it.arguments?.getInt("age")
            ScreenBUI(navController, name, age)
        }
    }
}

Step 3: Create UI for Screen A

In Screen A, we’ll set up fields to capture name and age, and use a button to navigate to Screen B while passing this data.

@Composable
fun ScreenAUI(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        var name by remember { mutableStateOf(TextFieldValue("")) }
        var age by remember { mutableStateOf(TextFieldValue("")) }

        Text("Screen A")
        TextField(name, onValueChange = { name = it }) //INPUT
        TextField(age, onValueChange = { age = it }) //INPUT
        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = {
            navController.navigate(
                ScreenB(
                    name = name.text,
                    age = age.text.toInt()
                )
            )
        }) {
            Text("Go to Screen B")
        }
    }
}

Step 4: Display Data on Screen B

In Screen B, retrieve and display the data passed from Screen A.

@Composable
fun ScreenBUI(navController: NavController, name: String?, age: Int?) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Screen B")
        Spacer(modifier = Modifier.height(16.dp))
        Text("Name: $name")
        Text("Age: $age")
        Button(onClick = { navController.navigate(ScreenA) }) {
            Text("Go to Screen A")
        }
    }
}

Final Result

After setting this up, you’ll see Screen B display the name and age entered in Screen A.