Android Day 25 How to pass data from one screen to another screen?

We need to modify alot of thing, just be patient:

package com.williamjiamin.multiscreennavigationdemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.williamjiamin.multiscreennavigationdemo.ui.theme.MultiScreenNavigationDemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MultiScreenNavigationDemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MyApp()
                }
            }
        }
    }
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "first") {
        composable("first") { FirstScreen{ email ->
            navController.navigate("second/$email")
        } }
        composable("second/{email}") {
            val email = it.arguments?.getString("email") ?: "no_email"

            SecondScreen(email){
            navController.navigate("first")
        } }
//        composable("third") { ThirdScreen{
//            navController.navigate("fourth")
//        } }
//        composable("fourth") { FourthScreen{
//            navController.navigate("first")
//        } }
    }
}

You'd better handle the no input at the input button here:

package com.williamjiamin.multiscreennavigationdemo

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.williamjiamin.multiscreennavigationdemo.ui.theme.MultiScreenNavigationDemoTheme

@Composable
fun FirstScreen(navigationToSecondScreen: (String) -> Unit) {

    val email = remember { mutableStateOf("")

    }

    Column (
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center

    ) {
        Text(text = "First Screen", fontFamily = FontFamily.Cursive, fontSize = 24.sp)
        Spacer(modifier = Modifier.padding(16.dp))
        OutlinedTextField(value = email.value , onValueChange = {
            email.value = it
        } )

        Spacer(modifier = Modifier.padding(16.dp))

        Button(onClick = {
            if(email.value.isEmpty()){
                navigationToSecondScreen("no_email")
            } else {
                navigationToSecondScreen(email.value)
            }

        }) {
            Text("Go to Second Screen")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun FirstScreenPreview() {
    MultiScreenNavigationDemoTheme {
        FirstScreen({})
    }
}

package com.williamjiamin.multiscreennavigationdemo

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.williamjiamin.multiscreennavigationdemo.ui.theme.MultiScreenNavigationDemoTheme

@Composable
fun SecondScreen(email: String, navigateToFirstScreen: () -> Unit) {
    val phone = remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Second Screen", fontFamily = FontFamily.Cursive, fontSize = 24.sp)
        Text(text = if (email == "no_email") {
            "WARNING: You should input email at First Screen!"
        } else {
            "Email: $email"
        })
        Spacer(modifier = Modifier.padding(16.dp))
        OutlinedTextField(
            value = phone.value,
            onValueChange = { phone.value = it }
        )
        Spacer(modifier = Modifier.padding(16.dp))
        Button(onClick = { navigateToFirstScreen() }) {
            Text("Go to First Screen")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun SecondScreenPreview() {
    MultiScreenNavigationDemoTheme {
        SecondScreen("WilliamJiamin@gmail.com",{})
    }
}

I just use first and second screen for demo. you can edit the rest of the screen.